如何在单击父类的另一个子类时获取子类的值

How do I get the value of a child on clicking another child of a parent Class?

本文关键字:子类 获取 另一个 单击 父类      更新时间:2023-09-26

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

 <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中做到这一点?

如果你使用

jQuery,你不需要使用内联事件,你可以使用 .on 函数添加事件,并获取类似示例的值

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

尝试如下:

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

在原版JS中,你的"做某事"将是这样的:

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