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

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

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

请参阅小提琴here

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

列表项数组上的Onclick事件

3 个答案: