在TD中選擇隱藏的輸入

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 Btw，直到現在我還是不清楚jQuery的“ this” :(

Answer 1

當您要使用this 函數時，請堅持使用普通函數表達式而不是Arrow函數 ，因為它沒有自己的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

該探針是您的箭頭功能。 可以將其替換為“正常”函數，也可以使用click函數的參數。

要了解有關不同類型的函數的更多信息，請查看此問題

Answer 4

您的HTML無效，應在table標簽中添加tr ，並在$(document).ready運行JS以確保已加載DOM對象。

this ，它將涉及您單擊的當前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選擇器相互補充，一起使用是到達單擊（或任何事件） 鏈接所在位置的相應元素的最佳方法。

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