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

它不起作用，该操作将显示的所有内容而是为选定的显示'td.views-field-title b'。

有什么想法吗？

Answer 1

这种情况正在发生，因为您的td.view-field-title p选择器与元素中的所有<td class="view-field-title">元素相匹配。我想你想用next来限制你所展示的内容：

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

但请注意这种方法，它对HTML的结构非常敏感。更好的方法是返回<td>，然后使用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/

单击时，它将显示特定内容

1 个答案: