jquery影响表id的所有实例

Question

我有一个通过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>

td内部每个tr内的数据不同，用户必须使用此复选框选择他们想要的行：

print "<input type=\"checkbox\" id=\"check\" data-border=\"$border\" data-z=\"$z\" data-x=\"$x\" data-pn=\"$pn\" value=\"\">";

然后，在我的JavaScript中，我有以下行，只要点击这些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为0bob的td褪色到70％。问题是，虽然代码“有效”，但它只会淡化第一个实例，然后停止，如下所示：

它始终淡化第一个实例（在此示例中为red），无论用户选择哪种颜色，（blue，pink或yellow）。

我也不能使用tr class，因为我已经在使用该类来更改格式的其他方面。我在这里做错了什么？

Answer 1

你必须使用课程。 ID必须是唯一的，如果你复制它们，浏览器会生气。您可以按如下方式传递多个类：

<element id="some-id" class="class1 class2 class3">

可以使用classList添加或删除JavaScript类。 JQuery有https://api.jquery.com/addclass/方法。

Answer 2

您应该使用data-*属性，因为ID应在文档中出现一次。但是，您可以使用$('[id=0bob]')之类的属性选择器来解决此限制。请参阅示例http://jsfiddle.net/Lk7dqbp6/

Answer 3

您的问题是id属性必须是唯一的。

浏览器会这样做：找到带有id的第一个元素并停在那里，应该。

使用重复的id是无效的HTML ，必须避免，如瘟疫。

有很多替代方案。

我只会为此编写HTML结构。

解决方案1：data-*属性

你已经使用过那些，所以，只需使用另一个！

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

这些是为了提供有关元素的附加数据而制作的。

解决方案2：另一个类

每个元素可以有多个类。

确保它们被空格隔开：

<tr class="user-bob another-class more classes"></tr>

这可能更难使用。

解决方案3：另一个id架构

如果您的SQL上有主键，则可以使用它来识别用户：

<tr id="user_bob_0"></tr>
<tr id="user_bob_1"></tr>
<tr id="user_bob_2"></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')

或者

$('.check')

这是正确的方法。
此外，性能提升将是巨大的！

属性选择器（如[type="checkbox"]和[id="check"]）是最慢的选择器之一！
唯一比这些慢的选择器是伪元素选择器（:before，:after，::selection，...）。

您可以在此处阅读更多内容：Is CSS faster when you are specific?

你可能会认为这不会影响jQuery，但它会 jQuery使用document.querySelectorAll()运行DOM中的CSS选择器来选择Javascript对象。 （当它失败或无法使用时，jQuery使用其他方法）

想象一下，你的jQuery为每个选择器寻找超过300个元素 现在想象一下包含类的基本表，其中一些元素连接到一个条目 看到区别？

这是您的代码需要200ms和30ms（非测量）之间的差异。