如何使用 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

使用 find() 和包含 (*) 选择器

$('.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>

Answer 2

由于每行中有两个子 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 3

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

<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 4

您需要一些方法来 link 输入图像。我就是这样做的：

将 class 添加到您的 img 中，以便使用 jquery（例如 "clickable" 或其他）和引用输入 ID 的数据属性更容易 select它看起来像这样:

<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 中元素的配置，它也能正常工作，因为图像通过数据属性绑定到输入。

编辑：pokkanome 的解决方案更聪明。

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

How to get value from input onclick with jQuery

html

jquery

get

row

onclick