javascript - 样式化选择缩略图

Question

我有一个图片幻灯片，当点击缩略图时会显示大图。到目前为止的代码工作正常。但是现在我想给选中的缩略图一个样式，比如给选中的缩略图加黑边。这个怎么做？

这是我的 html 代码:

        <div id="slideshow">        

        <ul id="slide-wrapper">
            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

        <ul class="thumnails">
            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

    </div>

这是我的 JS

//When we click on thumb img
$('.thumnails li').click(function() {

var
    //SlideShow
    sshow = $(this).closest('#slideshow'),
    //Big
    big = sshow.find('#slide-wrapper'),
    //thumb
    thumb = sshow.find('.thumnails'),
    //Get index
    indx = thumb.find('li').index(this),
    //Current index
    currentIndx = big.find('li').index(big.find('li:visible'));

//If currentIndx is same as clicked indx don't do anything
if(currentIndx == indx) {
    return;
}

big
    //Fadeout current image
    .find('li:visible').fadeOut(0).end()
    //Fadein new image
    .find('li:eq(' + indx + ')').fadeIn(0);
});

这是我的 Fiddle

Answer 1

向所选缩略图添加事件类:

$this.siblings()
     .removeClass('active')
     .end().addClass('active');

JSFiddle 示例:

http://jsfiddle.net/rj3yuvvy/3/