javascript - 列表项数组上的 Onclick 事件

Question

我有一个列表，我想创建一个函数来加粗单击的列表项。到目前为止，我设法创建了一个函数并将其分配给列表项。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

Answer 1

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

Answer 2

您需要像这样使用单击事件的上下文。

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

在这里看小提琴

Answer 3

为什么不使用一个类并在需要时切换它（例如在单击时添加它，并让 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;  
}