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

Question

如何从我点击的行中获取价值？

这是一个小例子：

<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

Answer 2

如果您只需要值，则隐藏输入是多余的。为什么不在 HTML5 中使用 data-* 属性？

<img class="removeRow removeImg removeDiv" src="img/remove.png" width="100%" data-repair="2">

然后就可以直接给图片绑定点击事件了。

$('img.removeRow').click(function () {
    var value = $(this).data('repair');
    // use value
});

这样，您可以通过数据标签传递尽可能多的信息。

Answer 3

您需要某种方式将图像与输入链接起来。我就是这样做的：

向您的 img 添加一个类，以便使用 jquery 进行选择（例如“可点击”或其他内容），以及引用输入 id 的数据属性，使其看起来像这样：

<input id="repairID_X" […] type="hidden">
<img class="removeRow removeImg removeDiv clickable" data-input-id="repairID_X" […] >

然后，在你的 javascript 中：

$('.clickable').click(function() {
    var input_id = $(this).data('input-id');
    var input_value = $('#' + input_id).val();
});

优点是，即使您更改 DOM 中元素的配置，它也可以工作，因为图像通过 data 属性与输入相关联。

编辑：pokkanome 的解决方案更智能。

Answer 4

使用find() 和 contains(*) 选择器

$('.row > div').click(function() {
      var theValue = $(this).find('[id*="repairID_"]').val();
    });

$('.row > div').click(function() {
  var theValue = $(this).find('[id*="repairID_"]').val();
  console.log(theValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>