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 =＆＃34; 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">

然后，您可以将click事件直接绑定到图像。

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

通过这种方式，您可以通过数据标记传递尽可能多的信息。

Answer 3

您需要某种方式将图像与输入相关联。我就是这样做的：

为你的img添加一个类，这样就可以更容易地用jquery选择（比如“clickable”或者其他什么东西），并且引用输入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中元素的处置方式，它也会起作用，因为图像通过数据属性与输入相关联。

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

Answer 4

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery

4 个答案: