jquery - 点击后会显示具体内容

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选择器匹配所有 <p> <td class="view-field-title"> 中的元素元素。我想你想使用 next 限制您显示的内容:

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

不过要小心这种方法，它对 HTML 的结构非常敏感。更好的方法是返回 <td>然后归结为 <p>使用 closest 和 find :

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