列表項上的Onclick事件

我有一個列表，我想創建一個函數，它會使點擊的列表項變成粗體。到目前爲止，我設法創建了一個函數並將其分配給列表項。 Onclick，它大膽，但只有一個項目。我不知道如何爲每個項目設置它。列表項上的Onclick事件

我本來可以用id來加粗項目，但列表中會有很多項目。我無法處理它們中的每一個。

HTML

<ul> 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul>

的javascript

var list = document.getElementsByTagName("li"); 

function markSelection() { 
    if(list[0].style.fontWeight !== "bold") { 
     list[0].style.fontWeight = "bold"; 
    } else { 
     list[0].style.fontWeight = "normal"; 
    } 
} 

for (i = 0, len = list.length; i < len; i++){ 
    list[i].onclick = markSelection; 
}

它僅加粗列表[0]。我怎樣才能將它設置爲加粗的點擊列表項？

jsfiddle

來源

2013-06-23 akinuri

function markSelection() { 
    if(this.style.fontWeight !== "bold") { 
     this.style.fontWeight = "bold"; 
    } else { 
     this.style.fontWeight = "normal"; 
    } 
} 

for (i = 0, len = list.length; i < len; i++){ 
    list[i].onclick = markSelection; 
}

來源

2013-06-23 20:54:38 gdoron

哈哈。我知道我可以使用'this'，但無法使它工作。謝謝。現在我會堅持用'this'而不是'evt.target'。 – akinuri

@akinuri，謝謝，但爲什麼你接受建議使用'event.target'的答案......？ :) – gdoron

嗯，他是第一個回答，他也鏈接了一個演示。我看到他的回覆後見到你。讓我們不要忘記你有46k〜：P，但是，但是，因爲我是新來的新人，我不知道哪個答案「更好」。我應該改變它嗎？ o.O – akinuri

您需要使用像這樣的單擊事件的背景。

function markSelection(evt) { 
    var tar = evt.target; 
    if(tar.style.fontWeight !== "bold") 
     tar.style.fontWeight = "bold"; 
    else 
     tar.style.fontWeight = "normal"; 
}

見小提琴here

來源

2013-06-23 20:54:07 Achrome

感謝您的回覆。現在正在工作。我不熟悉evt.target。要看看它。 – akinuri

有意回答另一個問題？在第二個項目上點擊，我希望列表項目恢復正常。我的意思是我不想有兩個或更多的粗體項目。只需1. – akinuri

在您的條件中放置一個循環，將整個列表切換回正常狀態，然後加上目標。 – Achrome

爲什麼不使用類，只要你想切換它（例如添加它的點擊，並讓CSS處理方式）

http://jsfiddle.net/blackjim/by9bP/2/

var list = document.getElementsByTagName("li"); 

function markSelection() { 

    if(this.className.indexOf('boldFruit')===-1){ 
     this.className += " boldFruit"; 
    } 
} 

for (i = 0, len = list.length; i < len; i++){ 
    list[i].onclick = markSelection; 
}

CSS

li { 
    font-size: 20px; 
} 

li.boldFruit { 
    font-weight: bold; 
}

來源

2013-06-23 20:57:29 AntouanK

額外的代碼。我想在粗體和普通的onclick之間切換。然後再次感謝您的回覆。 – akinuri

這不是額外的代碼，它幾乎相同。但這是正確的方式，如果你想讓代碼可維護，你應該用CSS來處理樣式。例如，您可能需要稍後向該課程添加一些內容，然後您會看到爲什麼這是正確的方式。你選。 – AntouanK

我明白你的觀點。事實上，我只是在另一個元素上使用它。我只是不想創建兩個類來修改單個屬性。 – akinuri

列表項上的Onclick事件

回答

相關問題