Javascript 处理多个ID'；在文件中

我在处理重复ID时遇到问题。我也知道，使用相同ID的元素是非常糟糕的做法，但在这种情况下，我将不得不更改应用程序的大量部分来更改ID，以便它们可以是唯一的

在jQuery中切换元素上的类时遇到问题。我的结构如下：

<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
    <span></span>
    <div id="wlHeader-7050"></div>
    <div id="wlBody-7050">
        <ul>
            <li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
                <div id="wlHeader-7050"></div>
            </li>
            <li id="wl-7051"></li>
            <li id="wl-7052"></li>
            <li id="wl-7053"></li>              
        </ul>
    </div>
</li>
</ul>

我需要的是一个函数，如果我单击ID wl-7050的第一个实例，子元素将接收一个新类。然而，如果我选择ID为wl-7050的第二个（单个）元素，那么只有一个元素添加了新类

我已经尝试使用jQuery及其：first&:eq（0）属性，但不幸的是仍然没有成功

我确实为每个li元素及其子元素分配了类，但每当我运行$（“#wl-7050:eq（0）”，它都会返回这两个元素，并且还会使用父wl-7050元素get

---

我对JavaScript和jQuery的回答很灵活。

您不需要为每个li添加一个id，这会使它过于复杂。只需在项目中使用类，并通过以下方式调用它们：

$（“#组li”）。在（“单击”，函数（）{
警报（$（this）.data（“id”）；
})

您不需要为每个li添加一个id，这会使其过于复杂。只需在项目中使用类，并通过以下方式调用它们：

$（“#组li”）。在（“单击”，函数（）{
警报（$（this）.data（“id”）；
})

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

你不能有两个wl-7050。使用类。然后“单击添加新类”只是硬代码。如果你需要帮助，我可以编辑我的答案。但这只是编码。Html ID是一个概念

id属性为HTML元素指定一个唯一的id（该值在HTML文档中必须是唯一的）

---

你不能有两个wl-7050。使用类。然后“单击添加新类”只是硬代码。如果你需要帮助，我可以编辑我的答案。但这只是编码。Html ID是一个概念

如果无法更改ID，可以尝试向两个元素添加不同的类名：

<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
    <ul>
        <li id="wl-7050" class="wl-7050-single">
            <div id="wlHeader-7050"></div>
        </li>
        <li id="wl-7051"></li>
        <li id="wl-7052"></li>
        <li id="wl-7053"></li>              
    </ul>
</div>
</li>
</ul>

---

如果无法更改ID，可以尝试向两个元素添加不同的类名：

<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
    <ul>
        <li id="wl-7050" class="wl-7050-single">
            <div id="wlHeader-7050"></div>
        </li>
        <li id="wl-7051"></li>
        <li id="wl-7052"></li>
        <li id="wl-7053"></li>              
    </ul>
</div>
</li>
</ul>

---

我以前也有过这样的经历：我不得不处理那些做了奇怪事情的应用程序，在这些应用程序中，将它们更改为“正确”会比处理它并继续前进更让人伤心。你知道重复ID不好，我知道重复ID不好；让我们把问题分类。（是的，它们很糟糕。是的，它们不应该在那里。不幸的是，它们在那里。）

您可以像对待元素上的任何其他属性一样对待ID：它们是属性，尽管是特殊的属性。这样的代码将用于选择具有相同ID的所有元素：$（'[ID=wl-7050]'）

现在，我们需要将单击事件绑定到它们。我们将一如既往地做同样的事情：

var lis = $('[id=wl-7050]').click(function(e){
    console.log(this);
});

这里有一个技巧，即使这些元素都有不同的ID，它也会发生：当您在子LI中单击时，该单击事件将冒泡到父LI。我们需要关闭事件传播，以避免两次触发单击事件：

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    console.log(this);
});

现在，我们在做生意，可以找出我们正在处理的

LI

类型：顶级还是儿童

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    if ($(this).children('li').length > 0) {
        // Top-level LI
    }
    else {
        // Child-level LI
    }
});

---

这会让你到达你需要的地方。让我们都同意不再谈论那些重复的ID。

我以前也有过这样的经历：我不得不处理那些做了奇怪事情的应用程序，在这些应用程序中，将它们更改为“正确”会比处理它并继续前进更让人悲伤。你知道重复ID不好，我知道重复ID不好；让我们把问题分类。（是的，它们很糟糕。是的，它们不应该在那里。不幸的是，它们在那里。）

您可以像对待元素上的任何其他属性一样对待ID：它们是属性，尽管是特殊的属性。这样的代码将用于选择具有相同ID的所有元素：$（'[ID=wl-7050]'）

现在，我们需要将单击事件绑定到它们。我们将一如既往地做同样的事情：

var lis = $('[id=wl-7050]').click(function(e){
    console.log(this);
});

这里有一个技巧，即使这些元素都有不同的ID，它也会发生：当您在子LI中单击时，该单击事件将冒泡到父LI。我们需要关闭事件传播，以避免两次触发单击事件：

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    console.log(this);
});

现在，我们在做生意，可以找出我们正在处理的

LI

类型：顶级还是儿童

var lis = $('[id=wl-7050]').click(function(e){
    e.stopPropagation();
    if ($(this).children('li').length > 0) {
        // Top-level LI
    }
    else {
        // Child-level LI
    }
});

---

这会让你到达你需要的地方。让我们都同意不再谈论那些重复的ID。

不管设计如何，这段代码都会产生错误的标记，因为ID不应该重复。也许您应该向代码展示如何切换类。关于如何在不需要ID的情况下实现这一点，有很多方法，但我们不知道您尝试了什么。您应该在主项中添加一个

class

，在子项中添加另一个。不管设计如何，这段代码都会产生错误的标记，因为ID不应该重复。也许您应该向代码展示如何切换类。有很多方法可以