當點擊，然後它會顯示具體內容

Question

我有一些HTML

<div class="view-content"> 
    <table class="views-table cols-10" style="font-size: 12px;"> 
    <thead> 
     <tbody>  
      <tr class="even" style="background-color: rgb(255, 255, 255);"> 
       <td class="views-field views-field-title" style="background-color: rgb(248, 248, 248); color: black;"> 
        <b>Is there any fees charged to lodge the complaint?</b> 
        <p style="font-size: 12px; display: none;"> 
       </td> 
     </tr> 
     <tr class="odd" style="background-color: rgb(248, 248, 248);"> 
      <td class="views-field views-field-rownumber" style="background-color: rgb(248, 248, 248); color: black;"> 3 </td> 
      <td class="views-field views-field-title" style="background-color: rgb(248, 248, 248); color: black;"> 
       <b>Can I lodge a complaint on behalf of another person?</b> 
        <p style="font-size: 12px; display: none;"> 
      </td> 
     </tr> 

和我添加的jQuery功能

$(document).ready(function() { 
    $('.view-content').find('table tbody tr').each(function() { 
     $(this).find('td.views-field-title p').hide(); 
     // alert($(this).html()); 
    }); 
}) 

問題是，當我補充一下：

$('td.views-field-title b').click(function() { 
     $('td.views-field-title p').show(); 
}) 

它沒有工作，動作會顯示<p></p>的所有內容 而不是顯示<p></p>對於選定的'td.views-field-title b'。

任何想法？

Answer 1

這是因爲您的td.view-field-title p選擇器與<td class="view-field-title">元素中的所有<p>元素相匹配。我想你想使用next限制大家展示一下：

$('td.views-field-title b').click(function() { 
    $(this).next('p').show(); 
}); 

要小心，這種方法雖然，這是你的HTML的結構高度敏感。更好的辦法是去備份到<td>，然後用closest和find歸結爲<p>：

$('td.views-field-title b').click(function() { 
    $(this).closest('td').find('p').show(); 
}); 

這仍然是你的HTML結構，但不那麼敏感。

而第二種方法（用HTML錯誤固定）的例子：http://jsfiddle.net/ambiguous/CBLtt/

---

如果你想只有一個段落在同一時間打開，然後進行簡單的修改單擊處理程序是所有需要：

$('td.views-field-title b').click(function() { 
    $('td.views-field-title p').hide();  // Hide them all. 
    $(this).closest('td').find('p').show(); // Then show the one we want. 
}); 

例子：http://jsfiddle.net/ambiguous/CBLtt/1/