Question

我试图从td中的隐藏输入中选择值并使用此jQuery，但它没有工作：

 $('.job-detail').click(() => {
   alert($(this).find('input[name=id]').val());
 });

<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />1</td>
    <td><input class="name" type="hidden"
        value="..." ></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>
<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />2</td>
    <td>...</td>
    <td>every day 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>

任何人都可以帮助我：D顺便说一句，我无法理解这个＆＃39;这个＆＃39;直到现在的jQuery :(

Answer 1

当你想使用this时，坚持正常的函数表达而不是Arrow function，因为它没有自己的 this ，并且它在词汇上绑定它们的上下文所以这实际上是指原始上下文（声明函数的范围）

 $('.job-detail').click(function(){
   alert($(this).find('input[name=id]').val());
 });

Answer 2

您可以使用箭头功能，但不能在其中使用此关键字，下面是使用箭头功能的代码

 $('.job-detail').click((e) => {
   alert($(e.currentTarget).find("input[name=id]").val());
 });

Answer 3

问题是你的箭头功能。要么用正常的＆＃39;替换它。函数或使用click函数的参数。

要了解有关不同类型功能的更多信息，请查看this question

Answer 4

您的HTML无效，您应该将tr添加到table标记中，还要在$(document).ready内运行JS以确保加载DOM对象。

对于this，它会引用您点击的curent tr。

$(document).ready(function() {
  $('.job-detail').on('click', function() {
    alert($(this).find('input[type=hidden]').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="job-detail">
    <td><input name="id" type="hidden" value="111" />1</td>
    <td><input class="name" type="hidden" value="..."></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
  </tr>
  <tr class="job-detail">
    <td><input name="id" type="hidden" value="222" />2</td>
    <td>...</td>
    <td>every da 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
  </tr>
</table>

Answer 5

.closest和.find选择器是彼此的补充，并且一起使用是获取点击（或任何事件）发生位置{* 3}}的相应元素的最佳方式。

$('.job-detail').click((e) => {
   alert($(event.target).closest('tr.job-detail').find('input[type=hidden]').val());
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />1</td>
    <td><input class="name" type="hidden"
        value="..." ></td>
    <td>every day 1:00</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr>
<tr class="job-detail">
    <td><input name="id" type="hidden" value="..." />2</td>
    <td>...</td>
    <td>every day 1 hour</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
    <td>yyyy/mm/dd hh24/mi/ss</td>
</tr></table>

选择td中的隐藏输入

5 个答案: