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

J'ai une liste et je veux créer une fonction qui va mettre en gras le cliqué sur un élément de liste. Jusqu'à présent j'ai réussi à créer une fonction et de l'attribuer à des éléments de liste. Onclick, c'gras, mais juste un élément. Je ne sais pas comment le configurer pour chaque élément.

J'aurai pu utiliser un id pour mettre en gras les éléments, mais il y aura beaucoup d'éléments dans la liste. Je ne peut 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 gras seule liste[0]. Comment puis-je le mettre en gras les cliqué sur un élément de liste?

jsfiddle

InformationsquelleAutor akinuri | 2013-06-23
  1. 3
    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;
}
    • Haha. Je savais que je pouvais utiliser this, mais ne pouvait pas le faire fonctionner. Je vous remercie. Je vais rester avec this au lieu de evt.target pour l'instant.
    • merci, mais alors pourquoi avez-vous accepté la réponse suggérant à l'aide de event.target...? 🙂
    • Eh bien, il a été le premier à répondre et il a également liée à une démo. J'ai vu le vôtre après, j'ai vu sa réponse. N'oublions pas que vous avez obtenu 46k~ 😛 mais, mais, puisque je suis nouveau ici et nouveau js, je ne sais pas quelle réponse est "mieux". Faut-il changer? o.O
    • vous devez accepter la réponse vous a aidé le plus. Il n'a pas d'importance qui a le plus de réputation.(et croyez-moi que 15 points ou même 150 de ne pas l'effet à long terme, j'étais juste curieux de savoir pourquoi avez-vous accepté la réponse que vous avez décidé de ne pas utiliser.) l'autre réponse est très bien, vous pouvez le garder cochée.
    InformationsquelleAutor gdoron is supporting Monica
  2. 1

    Vous devez utiliser le contexte de l'événement click de ce genre.

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

    Voir tripoter ici

    • Merci pour la réponse. Il travaille maintenant. Je ne suis pas familier avec evt.cible. Va le chercher.
    • Soins pour répondre à une autre question? Le deuxième élément, cliquez sur, je veux les éléments de la liste pour revenir à la normale. Je veux dire que je ne veux pas avoir deux ou plus gras élément. Juste à 1.
    • Mettre une boucle dans votre état qui passe de la liste entière de retour à la normale, puis bolden la cible.
    • Fait. Merci!!!!
    InformationsquelleAutor Achrome
  3. 0

    Pourquoi pas à l'aide d'une de la classe et de l'activer quand vous le souhaitez ( par exemple, en ajoutant sur cliquez et laissez 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;  
}
    • De code supplémentaire. Je veux basculer entre gras et normal onclick. Alors encore une fois, merci pour la réponse.
    • Ce n'est pas du code, c'est presque la même. Mais c'est la bonne façon, vous devez gérer le style avec CSS si vous voulez avoir votre code plus facile à maintenir. Peut-être que vous aurez besoin d'ajouter quelque chose au plus tard à la classe par exemple, alors vous comprendrez pourquoi c'était la bonne façon. A vous de choisir.
    • Je reçois votre point de vue. En fait, je suis alreay à l'aide de ce sur un autre élément. Je n'avais juste pas envie de créer deux classes de modifier une propriété unique.
    InformationsquelleAutor AntouanK