JavaScript函數'按父類獲取元素'並分配

我的困境相當簡單：此函數根據<ul>的父id獲取'this'<li>的id。它過去工作正常，但不再，我將或者需要有<ul>使用class es而不是id，同時仍然能夠將'current'的id分配給當前元素，或者更改我的css。JavaScript函數'按父類獲取元素'並分配

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

CSS

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); }

HTML

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

也許我需要改變我的CSS。這工作之前，但現在id沒有生效，因爲ul#leftlist li a優先，即使我通過JavaScript分配id="current"。

來源

2008-10-22 Marin

我建議你使用jQuery框架。它將爲您的DOM提供一個很好的抽象，並使您更容易在DOM中查找對象並將事件分配給這些對象。

嘗試閱讀this tutorial在jQuery.com。我相信它會讓你感到驚訝:)

來源

2008-10-22 15:06:31 roosteronacid

你應該使用諸如「current」之類的類，而不是id。這個id通常不會改變，「current」不是一個很好的id，因爲你可能在頁面上有一堆東西在某種程度上是「當前」的。如果你需要一些CSS樣式，以覆蓋另一個，你可以迫使它重要的：

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

來源

2008-10-22 15:06:56

看起來你確實需要更改一行在你的CSS：

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

它缺少rgb(background-color後應該是這樣的：

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

我還同意Erlend，current會更適合的一類。

來源

2008-10-22 15:10:15 Matt

的功能改變爲：

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 { ... }

來源

2008-10-22 15:11:00 Borgar

你做你的變化的方式，讓你最終超過一個元素具有相同的ID？）

這顯然違背了整個想法，使用ID的他們必須在HTML文檔的上下文中是完全獨特的...

- 第一件事，你應該做的是確保你只解決您的鋰元素：

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

其次，它可能是一個想法，以確保你選擇的一個更高的優先級在選擇器中設置更多內容：

如果您在標記上使用內聯樣式屬性，但獲得最高優先級，但在這裏似乎沒有任何用處。

標識給予了高度重視，類給出一個公正的優先級和元素 - 和僞選擇給低優先級...

但是每種類型的優先積累，並以這種方式你可以給一個選擇很通過用另一個相同的優先級型的它前面的高優先級：

ul#leftlist給出高優先級1點和低優先級1點

#myParent ul#leftlist給出高優先級2分和1在低

.myParent ul#leftlist給出了高優先級1點，在公平優先級1點和低優先級1點

因此，你可以在樣式表區分優先級的選擇 - ！）

來源

2008-10-22 15:13:15 roenving

JavaScript函數'按父類獲取元素'並分配

回答

相關問題