列表项数组上的 Onclick 事件答案

【问题标题】：Onclick event on an array of list items列表项数组上的 Onclick 事件
【发布时间】：2013-06-23 20:48:21
【问题描述】：

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

【问题讨论】：

标签： javascript arrays list onclick getelementsbytagname

【解决方案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;
}

【讨论】：

哈哈。我知道我可以使用this，但无法让它工作。谢谢你。我现在会坚持使用this 而不是evt.target。
@akinuri，谢谢，但是你为什么接受建议使用event.target...的答案？ :)
嗯，他是第一个回答的，他还链接了一个演示。我看到他的回复后才看到你的。我们不要忘记你有 46k~ ：P 但是，由于我是新来的，而且是 js 的新手，我不知道哪个答案是“更好的”。我应该改变它吗？ o.O
@akinuri，您应该接受对您帮助最大的答案。谁有更多的声誉并不重要。（相信我，从长远来看，15分甚至150分都没有影响，我只是好奇你为什么接受你决定不使用的答案。）另一个答案是好的，你可以检查一下。

【解决方案2】：

你需要像这样使用点击事件的上下文。

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

见小提琴here

【讨论】：

感谢您的回复。它现在正在工作。我不熟悉 evt.target。去查一下。
想回答另一个问题？在第二个项目单击时，我希望列表项目切换回正常状态。我的意思是我不想有两个或更多的粗体项目。只需 1 个。
在你的条件下放置一个循环，将整个列表切换回正常状态，然后加粗目标。

【解决方案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 之间切换。再次感谢您的回复。
这不是额外的代码，几乎是一样的。但这是正确的方法，如果你想让你的代码可维护，你应该使用 CSS 处理样式。例如，也许您稍后需要在该类中添加一些内容，然后您就会明白为什么它是正确的方法。你选择。
我明白你的意思。事实上，我已经在另一个元素上使用它了。我只是不想为了修改一个属性而创建两个类。