Javascript jquery影响表id的所有实例

我有一个通过php生成的表。只要“bob”是该数据所属人员的姓名，我就会生成一个

tr id

，表示：

<tr id="0bob">...</tr>
  <td>...</td>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>
<tr id="0bob">...</tr>

然后，在我的JavaScript中，我有下面一行，它应该在单击这些

tr

s中的一个复选框时将所有这些行变暗

var pn = this.dataset.pn;
var x = this.dataset.x;

//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)    
$('input[type="checkbox"][id="check"]').change(function() {
    $( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}

在我看来，代码是准确的——我要求将id为

0bob

的td衰减到70%。问题是，虽然代码“工作”，但它只会淡出第一个实例，然后停止，就像这样：

无论用户选择哪种颜色，（

蓝色、
粉色或
黄色），它都会在第一个实例中淡出（
在本例中为红色）

我也不能使用
tr类
，因为我已经在使用该类来更改格式的其他方面。我做错了什么？
你必须使用class。ID必须是唯一的，如果您复制它们，浏览器会生气。您可以按如下方式传递多个类：


可以使用
classList
添加或删除来自JavaScript的类。JQuery有方法。
您应该使用
数据-*
属性，因为ID在文档中只出现一次。但是，您可以通过使用属性选择器（如
$（'[id=0bob]'）
来解决此限制。例如，请参见您的问题是
id
属性必须是唯一的

浏览器会这样做：找到第一个id为
id
的元素，并按其应该的方式停止

使用重复的
id
s是无效的HTML，必须避免，就像瘟疫一样

这方面有很多选择

我将只为此编写HTML结构

解决方案1:a
数据-*
属性

你已经用过了，那就用另一个吧

<tr data-user="bob"></tr>

在某些情况下，这可能是一个坏主意，但它会让所有数据都可以随时使用，不会有很多麻烦


在回答范围之外，您还有另一个问题：

您有以下代码：

var pn = this.dataset.pn;
var x = this.dataset.x;

//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)    
$('input[type="checkbox"][id="check"]').change(function() {
    $( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}

你看到评论了吗

同样的问题：非唯一的
id
s

对于这一个，您最好使用类

而不是

$('input[type="checkbox"][id="check"]')

你会用

$('input.check')

或

这是正确的方法。

此外，性能增益将是巨大的

属性选择器（如
[type=“checkbox”]
和
[id=“check”]
）是速度最慢的选择器之一

唯一比这些选择器慢的是伪元素选择器（
：before
，
：after
，
：：selection
，…）

您可以在此处阅读更多内容：

您可能认为这不会影响jQuery，但它会的。

jQuery使用
document.querySelectorAll（）
，它在DOM中运行CSS选择器来选择Javascript对象。（当它失败或不可用时，jQuery使用其他方法）

想象一下，jQuery在每个元素中为选择器寻找300多个元素。

现在想象一个包含类的基本表，其中几个元素连接到一个条目。

看到区别了吗

这是您的代码使用200ms和30ms（未测量）时的差异。
基本上，您希望浏览器以一种不需要的方式工作。使用另一个类或
data-*
属性。或不同的ID模式。或者除相同ID之外的其他内容。它们必须是唯一的。ID是一个标识符。如何识别具有相同标识符的两个对象？您最大的问题是id不能重复。如果您希望某些功能在相同类型的html元素上工作，请选择类而不是id。“我已经在使用类更改格式的其他方面”-您可以向元素添加多个类，如果我从
id
更改为
class
，是否需要更改jquery字符串的语法<代码>$（“#”+x+pn）.fadeTo（“slow”，0.7，function（）{}）不再褪色，因为我已将其更改为类。您需要更改选择器以
开始，因为这是类的选择器。啊，是的-我真傻。在我将选择器更改为
后，添加第二个类（而不是使用ID）将非常有效。非常感谢你！你每天都可以通过SO学到一些新东西：）因为这对你很有用，我建议你使用CSS动画而不是Jquery。css动画会以jQuery所没有的方式给我带来什么好处？我只想给用户一个视觉指示器，表明他们已经做出了选择，虽然这不是有史以来最漂亮的东西，但将其衰减到70%肯定会向用户显示视觉上的差异“啊，我已经为这段
做了一个选择……哇，我已经为这条线索选择了正确的答案，但我真的很感谢你花时间来解释这一点。作为一个完全自学成才的人，我觉得有时候有些基本的事情我并不完全理解。我将来肯定会使用这些信息。非常感谢你@约翰：不客气。至少考虑一下支持你的答案。我想我已经这样做了：你现在是1个额外的互联网点的骄傲拥有者。我希望我能为你的附录提供更多。。。。天啊，这太有用了！再次，非常感谢你花时间帮助我，善良的网络陌生人@谢谢你。我希望这能在将来帮助其他人解决同样的问题。
var pn = this.dataset.pn;
var x = this.dataset.x;

//anytime a checkbox with the id 'check' is clicked, (this is every checkbox on the page)    
$('input[type="checkbox"][id="check"]').change(function() {
    $( "#" + x + PN ).fadeTo( "slow" , 0.7, function() { });
}

$('input[type="checkbox"][id="check"]')

$('input.check')

$('.check')