Question

$('.details').click(function(){
  $(this).index()+1).toggleClass('.details, .overlay-wrapper');
});

每个表格单元格中都有一些细节/内容（隐藏）。每当用户选择我需要通过索引的单元格时，只显示单元格中的details / div。

表格中的每个单元格都有一个div /细节。所以我只需要在正确的单元格中打开和关闭div。目前它切换页面上的每个细节div。

谢谢

JsFiddle在下面是html。

http://jsfiddle.net/t6yczwuo/

Answer 1

您显示的代码有几个问题：

不匹配的支架
toggleClass的参数不正确（无.且无逗号）

没有HTML，这完全是猜测，但你很少需要索引来处理相关的单元格。以下模型使用closest()查找TD父级，然后使用find()查找同一TD中的另一个相关单元格：

$('.details').click(function(){
    $(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/gj2zz8po/

此示例只是切换您在详细信息div上指定的类，并隐藏/显示同一TD内的相关div。

如果您使用此JSFiddle作为示例的开头，我们可以自定义代码以符合您的情况。

更新新HTML：

$('.details-more').click(function (e) {
    e.preventDefault();
    $(this).closest('td').find('.overlay-wrapper .details').toggle();
});

http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/

注意：即使在书签链接上也应使用e.preventDefault()，以便在点击较长页面时停止页面移动到顶部。

Answer 2

您需要.next()而不是index()。

.toggleClass()只接受一个没有.的班级名称。此外，不建议切换使用任何类型选择器的类。

$('.details-more').click(function(e){
    e.preventDefault();
    $(this).next('.overlay-wrapper').find('div').toggleClass('details');

    //Instead of find('div') you could use a specific class selector - 
    //find('.targetHidden') provided this class remains static throughout the html.
});

<强> Updated Fiddle

Answer 3

HTML

<table style="width:100%">
  <tr>
    <td>Header</td>
    <td>Header</td> 
    <td>Header</td>
  </tr>
  <tr>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME TEST RANDOM STUFF</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

.details {display:none;}

的Javascript

$('.details-more').click(function(){
  $(this).next('.overlay-wrapper').toggleClass('details');
});

使用JQuery

3 个答案: