Événement Onclick sur un tableau d'éléments de la liste

Question

J'ai une liste et je veux créer une fonction qui affichera en gras l'élément de la liste cliquée. Jusqu'à présent, j'ai réussi à créer une fonction et l'assigner à la liste des éléments. Onclick, ça plait, mais juste un élément. Je ne sais pas comment le régler pour chaque article.

J'aurais pu utiliser id pour mettre en gras les éléments mais il y aura beaucoup d'éléments dans la liste. Je ne peux pas traiter avec chacun d'eux.

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

Il Bolds seule liste [0]. Comment puis-je le mettre en gras dans l'élément de la liste cliquée?

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

Vous devez utiliser le contexte de l'événement click comme celui-ci.

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

Voir violon here

Answer 3

Pourquoi ne pas utiliser une classe et l'activer à chaque fois que vous voulez (par exemple l'ajout sur clic, et laisser css gérer le style)

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