Wie kann ich einen ausgewählten Listeneintrag mit jquery markieren?

Question

Ich habe mehrere Elemente in einer Liste und wollen durch die Anwendung einiger CSS-Stil markieren auf der einen ein Benutzer klickt, vielleicht eine Hintergrundfarbe usw.

Mein HTML sieht wie folgt aus:

<ul class="thumbnails"> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb1.jpg' alt=""> 
      <span class="gifttitle">Thumb1</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb2.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
    <li> 
     <a href="#" class="thumbnail"> 
      <img class="giftthumb" src='thumb3.jpg' alt=""> 
      <span class="gifttitle">Thumb3</span> 
     </a>  
    </li> 
</ul> 

JQuery ausgewählte Artikel abrufen:

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 

    ??? 

}) 

Answer 1

könnten Sie verwenden jQuery class management methods (nämlich addClass() und removeClass() in diesem Fall) eine Klasse auf das ausgewählte Element hinzuzufügen und die gleiche Klasse von allen anderen Elemente entfernen (wenn nur einer nach dem anderen ausgewählt wollen).

//save class name so it can be reused easily 
//if I want to change it, I have to change it one place 
var classHighlight = 'highlight'; 

//.click() will return the result of $('.thumbnail') 
//I save it for future reference so I don't have to query the DOM again 
var $thumbs = $('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    //run removeClass on every element 
    //if the elements are not static, you might want to rerun $('.thumbnail') 
    //instead of the saved $thumbs 
    $thumbs.removeClass(classHighlight); 
    //add the class to the currently clicked element (this) 
    $(this).addClass(classHighlight); 
}); 

in Ihrem CSS Dann fügen Sie einfach:

.highlight { 
    background-color: cyan; 
    font-weight: bold; 
} 

jsFiddle Demo

Dies ist eine bessere Lösung als Eigenschaften CSS Ändern direkt von jQuery/Javascript (mit dem .css() Verfahren zum Beispiel), weil Trennung von Bedenken macht Ihren Code überschaubarer und lesbarer.

Answer 2

$('.thumbnail').click(function(e) { 
    e.preventDefault(); 
    $(this).css('background-color', 'red'); 
}) 

Answer 3

Ihr ??? wäre:

$('.thumbnail').removeClass('selected'); 
$(this).addClass('selected'); 

Dann alles, was Sie tun müssen, ist Ihre "ausgewählte" CSS-Klasse zu definieren.

Answer 4

Wenn Sie nicht brauchen die aktiv zu sein persistent hier ein CSS Weg ist:

li:focus{ 
 
    background: red; 
 
} 
 
li:active{ 
 
    background: gold; 
 
}

<ul> 
 
    <li tabindex="1">Item 1</li> 
 
    <li tabindex="1">Item 2</li> 
 
    <li tabindex="1">Item 3</li> 
 
</ul> 
 

 
Now click <b>here</b> and see why it's not persistent.

in einigen Situationen die oben könnte nützlich sein - nur den aktuell "klickaktiven" Gegenstand & hellip;