Question

我的表单中有多个输入字段，使用“添加”按钮。我用图像标签创建了我的按钮。每个图像标记都具有相同的类。一旦我点击图像，我想得到我最近的输入字段的id以及数据属性值。这是我的HTML示例：

<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
    <label for="age">Age:</label>
    <input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>

以下是我在JQuery中尝试的内容：

$('.masterRecords').on('click', function(){
    console.log($(this).closest('input').prop('id'));
});

在我的调试控制台中，我只看到'undefined'。首先，我不确定我是否找到了解决这个问题的最佳方法。我再说一遍，有多个元素使用同一个类，我需要为每个元素提取ID和数据。它们都在单独的div容器中，如上面的示例所示。如果有人看到我的代码中的bug在哪，请告诉我。如果有更好的方法使用JQuery / HTML5 / CSS3，我还想听听一些建议。谢谢。

Answer 1

尝试使用siblings代替closest。

$('.masterRecords').on('click', function(){
    console.log($(this).siblings('input').prop('id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
    <img src="https://i.stack.imgur.com/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
    <label for="age">Age:</label>
    <input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
    <img src="https://i.stack.imgur.com/Qo01e.png" alt="Click to add value" class="masterRecords" />
</div>

Answer 2

解决方案：https://jsfiddle.net/jdjc1bc7/

this.mongoDailyReportCollection.updateOne(filter, Updates.set("daily.$.executionParam1", "Banana"));

你可以检查兄弟姐妹的输入，因为在你当前的DOM中，输入是被点击的元素的兄弟。

这应该是最快的方式。 https://jsperf.com/jquery-siblings-vs-parent-find-vs-find

Answer 3

如果您的结构始终如此，您还可以使用

检索相关输入

$('input', $(this).parent())

将返回与图像相同的div中的所有输入

Answer 4

因为输入位于左侧，您可以这样找到：

$('.masterRecords').on('click', function(){
   console.log($(this).prev('input').prop('id'));
  });

如果输入是在按钮之后，那么你可以这样找到它：

 $('.masterRecords').on('click', function(){
    console.log($(this).next('input').prop('id'));
 });

然后对于数据属性值，只需使用ID值的.data或.attr：

 $('#'+ID).attr('data-master');

$('.masterRecords').on('click', function(){
var inputTextId = $(this).prev('input').prop('id');

		console.log(inputTextId);
    console.log($('#'+inputTextId).attr('data-master'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formItem">
    <label for="status">Status:</label>
    <input type="text" name="ls_status" id="ls_status" value="" data-master="STATUS" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>
<div class="formItem">
    <label for="age">Age:</label>
    <input type="text" name="ls_age" id="ls_age" value="" data-master="AGE" size="10" maxlength="10" readonly />
    <img src="Images/add.png" alt="Click to add value" class="masterRecords" />
</div>

Answer 5

<INPUT/>元素不是图像的祖先。尝试：

$('.masterRecords').on('click', function(){
    console.log($(this).closest(".formItem").find('input').attr('id')); 
});

如何获得JQuery最接近的输入id和data-attr？

5 个答案: