$（this）.find不起作用

Question

我試圖顯示/隱藏某些內容，當我點擊一個tr時，它以某種方式無法正常工作。這是簡化的代碼：

HTML：

<table> 
    <tr onclick="showDetails()"> 
     <td>Some text 
      <br> <span class="hiddenContent">Some hidden content</span> 

     </td> 
     <td>Some More Text 
      <br> <span class="hiddenContent">Some hidden content</span> 

     </td> 
    </tr> 
    <tr onclick="showDetails()"> 
     <td>Some text 
      <br> <span class="hiddenContent">Some hidden content</span> 

     </td> 
     <td>Some More Text 
      <br> <span class="hiddenContent">Some hidden content</span> 

     </td> 
    </tr> 
</table> 

的JavaScript：

function showDetails() { 
    $(".hiddenContent").hide(); 

    $(this).find(".hiddenContent").show(); 
} 

Answer 1

這是因爲this指window對象。

如果你想this被綁定到點擊的元素，你可以調用與.call() method的功能，並通過this。

Example Here

<tr onclick="showDetails.call(this)"></tr> 

---

或者，您也可以只傳遞給this引用作爲參數：

Example Here

<tr onclick="showDetails(this)"></tr> 

function showDetails(el) { 
    $(".hiddenContent").hide(); 

    $(el).find(".hiddenContent").show(); 
} 

---

更好的方法是使用unobtrusive JavaScript和附加一個事件監聽器tr元素來代替：

Example Here

$('tr').on('click', function() { 
    $(".hiddenContent").hide(); 
    $(this).find(".hiddenContent").show(); 
});