Question

如何使用类＆＃34; OriginalSuggestedQty＆＃34;获取隐藏字段的值。当检查行中的复选框时？

这是HTML的样子：

<input class="OriginalSuggestedQty" type="hidden" value="5">
<tr>
    <td >
        <input class="SuggestedQty" id="items_1__SuggestedQty" type="text" value="9">
        <input checked="checked" class="suggested"type="checkbox" value="true">
    </td>
</tr>

这就是我现在所拥有的：

$(".suggested").change(function() {
    if ($(this).is(":checked")) {
        var originalVal = $(this).closest('.OriginalSuggestedQty').val();
        $(this).closest('tr').find('.SuggestedQty').val(originalVal);
    }
});

Answer 1

如果HTML在整个页面中具有相同的结构。

这样：

input
table > tbody > tr > td > checkbox

我不会使用jQuery（相当繁重的函数，有很多迭代）来做这么简单的DOM遍历：

这样做：

$(".suggested").change(function() {
  if ($(this).is(":checked")) {
      //refer to this, without jQuery wrapper
      var originalVal = $(this.parentElement.parentElement.parentElement.parentElement.previousElementSibling.querySelector("input.OriginalSuggestedQty")).val();
  }
 }

这将通过向父母（伟大的祖父母table）选择输入，选择在他之前的兄弟previousElementSibling（防止选择文本节点），然后使用{{1选择正确的元素。

最后将其包装在jQuery对象中以允许执行jQuery ninja。

但是我会使用替代解决方案：

您的输入都有querySelector：id。为什么不给每个输入一个相应的data-id属性：

items_1__SuggestedQty

现在您可以通过以下方式轻松选择：

<input class="OriginalSuggestedQty" data-id="items_1__SuggestedQty"  type="hidden" value="5">

$(".suggested").change(function() { if ($(this).is(":checked")) { var originalVal = $("input[data-id='"+$(this).prev().attr("id")+"']").val(); $(this).closest('tr').find('.SuggestedQty').val(originalVal); } });此位将选择包含与复选框旁边的输入的id匹配的数据属性的元素。这样，元素之间的链接更加健壮。如果将来某些HTML结构发生变化，那么债券就不会被打破。

Answer 2

要匹配帖子中显示的确切HTML，您可以使用：

$(this).closest('tr').prev()

这将一直到达TR，然后选择前一个DOM元素，即输入这是正确的还是TR和输入之间还有其他元素？

在TR之外获得最接近的隐藏价值

2 个答案: