使用JQuery获取表onClick的单元格索引

Question

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

每个表单元格中都有一些详细信息/内容（隐藏）。 每当用户选择单元格时，我都需要通过索引，因此仅显示该单元格中的详细信息/格。

表格中的每个单元格在该单元格中都有一个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/

本示例仅切换您在detail 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.
});

更新小提琴

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

Java脚本

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