JavaScript 函数“按父类获取元素”并分配答案

【问题标题】：JavaScript function to 'get element by parent class' and assignJavaScript 函数“按父类获取元素”并分配
【发布时间】：2010-09-18 13:44:17
【问题描述】：

我的困境相当简单：这个函数根据<ul> 的父id 获取'this' <li> 的id 元素。它过去可以正常工作，但现在不行了，我要么需要<ul> 使用classes 而不是id，同时仍然能够将“当前”的id 分配给当前元素，或者更改我的

function myFunction(element) {
  liArray = document.getElementById("leftlist").childNodes;
  i = 0;
  while (liArray[i]) {
    liArray[i].id = "";
    i++;
  }
  element.id = "current"; // or element.className  ?
}

ul#leftlist {
  background-color: rgb(205, 205, 205);
}

ul#leftlist li#current a {
  color: rgb(96, 176, 255);
  background-color: 218, 218, 218);
}

ul#leftlist li a {
  color: rgb(86, 86, 86);
}

#leftlist a:link {
  color: rgb(86, 86, 86);
  background-color: #ddd;
}

#leftlist a:active {
  color: rgb(96, 176, 255);
  background-color: rgb(218, 218, 218);
}

<ul id="leftlist">
  <li onClick='myFunction(this);'>
    <a href="123" bla bla </a></li>
  <li onClick='myFunction(this);'> .... etc.</li>
</ul>

也许我需要更改我的 CSS。这以前有效，但现在当前的id 无效，因为即使我通过 JavaScript 分配id="current"，ul#leftlist li a 也具有优先权。

【问题讨论】：

标签： javascript html css

【解决方案1】：

函数变为：

function myFunction(element){
  var liArray = document.getElementById("leftlist").childNodes;
  var i=0, item;
  while (item = liArray[i++]) {
    if (item.nodeType === 1) {
      item.className = item.className.replace(/(^| )current( |$)/g, '');
    }
  }
  element.className += " current";
}

CSS 也需要更改类：

ul#leftlist li.current a { ... }

【讨论】：

【解决方案2】：

您是否以某种方式进行更改，以便最终得到多个具有相同 id 的元素？-)

这显然与整个想法背道而驰，使用 id 在 html 文档的上下文中它们必须是完全唯一的......

-- 你应该做的第一件事是确保你只处理你的 li 元素：

liArray=element.parentNode.getElementsByTagName("li");

其次，这可能是一个想法，通过在选择器中设置更多内容来确保您的选择器具有更高的优先级：

如果您在标签上使用内联样式属性，则会获得最高优先级，但这在这里似乎没有任何用处。

ID 给予高优先级，类给予公平优先级，元素和伪选择器给予低优先级...

但是每种类型的优先级都是累积的，通过这种方式，您可以通过在一个选择器前面加上另一个具有相同优先级类型的选择器来赋予它非常高的优先级：

ul#leftlist 高优先级 1 分，低优先级 1 分

#myParent ul#leftlist 高优先级 2 分，低优先级 1 分

.myParent ul#leftlist 高优先级 1 分，一般优先级 1 分，低优先级 1 分

因此，您可以在样式表中区分选择器的优先级！-)

【讨论】：

【解决方案3】：

看来您确实需要更改 css 中的一行：

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color:218,218,218);}

在background-color 之后缺少rgb(，应该如下所示：

ul#leftlist li#current  a{color: rgb(96,176,255);  background-color: rgb(218,218,218);}

我也同意 Erlend 的观点，current 更适合上课。

【讨论】：

【解决方案4】：

您应该将类用于“当前”之类的内容，而不是 id。 id 通常不应该改变，并且“current”不是一个很好的 id，因为你可以在一个页面上以某种方式拥有一堆“当前”的东西。如果你需要一些 css 样式来覆盖另一个，你可以用 !important 强制它：

ul#leftlist li.current a {
  color: rgb(96,176,255) !important;
  background-color:218,218,218) !important;
}

【讨论】：

【解决方案5】：

我建议您使用 jQuery 框架。它将为您的 DOM 提供一个很好的抽象，让您更轻松地在 DOM 中查找对象并将事件分配给这些对象。

尝试在jQuery.com 上阅读this tutorial。我相信它会让你大吃一惊:)

【讨论】：