jquery - 如何使用 jQuery 从输入 onclick 中获取值

Question

如何从我点击的行中获取值(value)？

举个例子:

<div class="row" id="multiRows">
    <div>
        <div class="col-sm-5"><input id="DescRepair_0" name="dynfields[0][DescRepair]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-5"><input id="NestParts_0" name="dynfields[0][NestParts]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="EdPrice_0" name="dynfields[0][EdPrice]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="DateRepair_0" name="dynfields[0][DateRepair]" class="form-control dateBox removeDiv" type="text"></div>
        <input id="repairID_0" name="dynfields[0][repairID]" value="1" class="form-control removeDiv" type="hidden">
        <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%">
    </div>

    <div>
        <div class="col-sm-5"><input id="DescRepair_1" name="dynfields[1][DescRepair]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-5"><input id="NestParts_1" name="dynfields[1][NestParts]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="EdPrice_1" name="dynfields[1][EdPrice]" class="form-control removeDiv" type="text"></div>
        <div class="col-sm-1 removeDiv"><input id="DateRepair_1" name="dynfields[1][DateRepair]" class="form-control dateBox removeDiv" type="text"></div>
        <input id="repairID_1" name="dynfields[1][repairID]" value="2" class="form-control removeDiv" type="hidden">
        <img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%"></div>
    </div>
</div>

当我点击 img 时，我想获取隐藏输入的值 (id="repairID_X)。我尝试了几个选项，但我不能做我想做的，如果有人帮助我会很高兴。谢谢。

Answer 1

由于每行中有两个子 div，每个子 div 都有它的输入元素 repairID_，因此您希望将事件监听器附加到子 div 或图像:

$('.row > div').on('click', function() {
    var val = $('input[id^="repairID_"]', this).val();
});

DEMO

或者使用图片:

$('.row img.removeRow').on('click', function() {
    var val = $(this).prev().val();
});

DEMO

如果您只想要两个隐藏输入的值，而不管单击的图像是什么，请使用此命令:

$('img.removeRow').on('click', function() {
    var values = $(this).closest('.row').find(':hidden[id^="repairID_"]').map(function(i,v) {
        return this.value;
    }).get().join(','); //result: "1,2"
});

DEMO