8

リストにいくつかのアイテムがあり、ユーザーがクリックしたアイテムを、CSS スタイル、おそらく背景色などを適用して強調表示したいと考えています。

私のHTMLは次のようになります。

<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:

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

    ???

})
4

4 に答える 4

16

jQuery のクラス管理メソッド(つまりaddClass()、removeClass()この場合は and) を使用して、選択したアイテムにクラスを追加し、他のすべてのアイテムから同じクラスを削除できます (一度に 1 つだけを選択したい場合)。

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

次に、CSS に以下を追加します。

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

jsFiddle デモ

.css()これは、CSS プロパティを jQuery/Javascript から (メソッドなどで)直接変更するよりも優れたソリューションです。

于 2013-03-08T19:05:36.783 に答える
2 
$('.thumbnail').click(function(e) {
    e.preventDefault();
    $(this).css('background-color', 'red');
})
于 2013-03-08T19:03:08.053 に答える
1

君の ？？？だろう：

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

あとは、「選択した」css クラスを定義するだけです。

于 2013-03-08T19:04:02.090 に答える