$（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(); 
});