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>

当我点击任意Row的删除图像时，我想获取带有类名＆＃34;用户＆＃34;的输入字段的值。这个具体的行。我怎么能在javascript中做到这一点？

Answer 1

如果使用jQuery，则不需要使用内联事件，可以添加具有.on函数的事件，并获得如示例中的值

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

Example

Answer 2

尝试如下：

$('.delete').on('click', function(){
    var value = $(this).closest('.row').find('.User').val();
    //Do something with value;
});

Answer 3

在vanilla JS中，你的“做某事”将是这样的：

alert( this.parentNode.getElementsByClassName("user")[0].value; )

如何在点击父类的另一个孩子时获得孩子的价值？

3 个答案: