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

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

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

多谢各位

下面是JSFIDLE和html

---

显示的代码有几个问题：

• 不匹配括号
• toggleClass的参数不正确（无
  且无逗号）

如果没有HTML，这完全是猜测，但是您很少需要索引来处理相关单元格。以下实体模型使用

closest（）

查找TD父节点，然后使用

find（）

查找同一TD中的另一个相关单元：

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

JSFiddle:

本例仅切换在details div上指定的类，并隐藏/显示同一TD中的相关div

如果您使用这个JSFIDLE作为示例的开始，我们可以定制代码以匹配您的情况

更新您的新HTML：

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

注意：即使在书签链接上，也应使用

e.preventDefault（）

来阻止在较长页面上单击时页面移到顶部。

您需要

.next（）

而不是

index（）

.toggleClass（）

只接受一个没有

的类名。此外，不建议切换使用任何类型选择器的类

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

HTML

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

Javascript

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

.details {display:none;}

---

你能发布你的标记吗？

$（this.index（）+1）

-

）

不匹配！您还试图（无效参数）关闭用于连接click事件的类，这也表明有些地方不太正确：）显示HTML这很容易。如果没有，一切都是猜测。请提供您的HTML示例。您的

toggleClass

调用也不正确-它们应该用空格（没有逗号）分隔，并且没有前导的

，正如@mattytommo所建议的，在这里看到您的HTML真的很有帮助。您能提供HTML代码片段吗？我用JSFIDLE更新了我的问题。但是，我使用了您的代码片段。通过一些调整，它的工作！谢谢大家!@好老史努比：我也更新了我的，以配合你的新小提琴。见上文。干杯我注意到的一件事是。单击元素后，

onClick

也被附加。元素消失了。你知道这可能是什么原因吗？那是最初的

toggleClass

。现在从示例中删除，因为您显然只想切换另一个div:）谢谢，伙计，感谢您的帮助。我知道我现在完全错了：p我很快会把你的答案标对的。我只想把它打开一小段时间，看看是否有人在讨论其他方法：）它通常更“健壮”，避免使用

next（）

和

prev（）

，而同时使用

closest（）

和

find（）

。它们允许DOM布局在不易中断的情况下进行更改。我的意思是要说明

index（）+1

在这里是一个错误的方法；逻辑上等于

next（）

.XY问题。。。找出他们真正想要/需要什么，而不是他们要求什么：）最好在这里提供代码和解释。否则，没人会费心去看你修复了什么：）它好吗@TrueBlueAussie

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

.details {display:none;}

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