Javascript 列表项数组上的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;
}

var list=document.getElementsByTagName（“li”）；
函数标记选择（）{
如果（列表[0].style.fontwweight！=“粗体”）{
列表[0]。style.fontwweight=“bold”；
}否则{
列表[0]。style.fontwweight=“正常”；
}
}
对于（i=0，len=list.length；i

它仅粗体显示列表[0]。如何将其设置为加粗单击的列表项

---

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

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

---

请参见fiddle，您需要像这样使用click事件的上下文

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

请参见小提琴

函数标记选择（）{
如果（this.style.fontweaght！=“粗体”）{
this.style.fontwweight=“bold”；
}否则{
this.style.fontwweight=“正常”；
}
}
对于（i=0，len=list.length；i

函数标记选择（）{
如果（this.style.fontweaght！=“粗体”）{
this.style.fontwweight=“bold”；
}否则{
this.style.fontwweight=“正常”；
}
}
对于（i=0，len=list.length；i

为什么不使用一个类，并随时切换它（例如，单击时添加它，让css处理样式）

---

为什么不使用一个类并随时切换它（例如，单击时添加它，并让css处理样式）

---

---

谢谢你的回复。它正在工作。我不熟悉evt.target。我去查一下，想回答另一个问题吗？在第二次项目单击时，我希望列表项目切换回正常状态。我的意思是我不想有两个或更多的粗体项目。只需1.在你的状态中设置一个循环，将整个列表切换回正常状态，然后将目标加粗。谢谢你的回复。它正在工作。我不熟悉evt.target。我去查一下，想回答另一个问题吗？在第二次项目单击时，我希望列表项目切换回正常状态。我的意思是我不想有两个或更多的粗体项目。只需1.在你的状态中设置一个循环，将整个列表切换回正常状态，然后将目标变为粗体。哈哈。我知道我可以使用

这个

，但无法让它工作。非常感谢。现在我将坚持使用

这个

而不是

evt.target

。@akinuri，谢谢，但是你为什么接受建议使用

事件.target的答案呢他是第一个回答的，他还链接了一个演示。在我看到他的回答后，我看到了你的回答。别忘了你得到了46k~：P，但是，因为我是新来的，对js也不熟悉，所以我不知道哪个答案是“更好”。我应该换吗？o。O@akinuri，你应该接受对你帮助最大的答案。谁的声望更高并不重要。（相信我，从长远来看，15分甚至150分都不起作用，我只是好奇你为什么会接受你决定不使用的答案。）另一个答案很好，你可以检查一下。哈哈。我知道我可以使用
这个
，但无法让它工作。非常感谢。现在我将坚持使用
这个
而不是
evt.target
。@akinuri，谢谢，但是你为什么接受建议使用
事件.target的答案呢他是第一个回答的，他还链接了一个演示。在我看到他的回答后，我看到了你的回答。别忘了你得到了46k~：P，但是，因为我是新来的，对js也不熟悉，所以我不知道哪个答案是“更好”。我应该换吗？o。O@akinuri，你应该接受对你帮助最大的答案。谁的声望更高并不重要。（相信我，从长远来看，15分甚至150分都没有效果，我只是好奇你为什么接受你决定不使用的答案。）另一个答案很好，你可以检查它。额外代码。我想在粗体和普通onclick之间切换。再次感谢你的回复。这不是额外的代码，几乎是一样的。但这是正确的方法，如果您想让代码保持可维护性，就应该使用CSS处理样式。例如，也许你以后需要在这个类中添加一些东西，然后你就会明白为什么这样做是正确的。你选择，我明白你的意思。事实上，我一直在另一个元素上使用这个。我只是不想创建两个类来修改一个属性。额外的代码。我想在粗体和普通onclick之间切换。再次感谢你的回复。这不是额外的代码，几乎是一样的。但这是正确的方法，如果您想让代码保持可维护性，就应该使用CSS处理样式。例如，也许你以后需要在这个类中添加一些东西，然后你就会明白为什么这样做是正确的。你选择，我明白你的意思。事实上，我一直在另一个元素上使用这个。我只是不想创建两个类来修改一个属性。
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;
}

li {
    font-size: 20px;
}

li.boldFruit {
    font-weight: bold;  
}