列表项上的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事件

回答

相关问题