javascript - 单击父类的另一个子级时，如何获得子级的值？

Question

考虑我有这样一个结构(一组重复的字段)；

 <div class="form-group Row"> <!-- first row-->
    <div class="col-sm-3">
        <input type="text" class="form-control User" name="user" value="$users" placeholder="Username" />
    </div>
    <div class="col-sm-3">
        <input type="password" class="form-control" name="pw" value="$passwords" placeholder="Password" />
    </div>
    <a class="delete" onclick='//do something'><img src="delete.png"></a>
</div>
<div class="form-group Row"><!-- second row-->
    <div class="col-sm-3"> 
        <input type="text" class="form-control User" name="user" value="$user" placeholder="Username" />
    </div>
    <div class="col-sm-3">
        <input type="password" class="form-control" name="pw" value="$passwords" placeholder="Password" />
    </div>
    <a class="delete" onclick='//do something'><img src="delete.png"></a>
</div>

当我单击任何行的删除图像时，我想获取该特定行的类名为“User”的输入字段的值。我如何在 javascript 中执行此操作？

Answer 1

如果您使用 jQuery，则不需要使用内联事件，您可以使用 .on 函数添加事件，并像示例中那样获取值

$('.delete').on('click', function () {
   var value = $(this).parent().find('.User').val();
   console.log(value)
});

Example