如何添加动态.selected在这里选择的元素类？

Question

在这个例子中。通过点击缩略图，大图像正在发生变化。我想添加边框到选定的缩略图。

看到这里的例子http://jsfiddle.net/Qhdaz/2/

HTML

<div id="big-image"> 
    <img src="http://lorempixel.com/400/200/sports/1/"> 
    <img src="http://lorempixel.com/400/200/fashion/1/"> 
    <img src="http://lorempixel.com/400/200/city/1/"> 
</div> 

<div class="small-images"> 
    <img src="http://lorempixel.com/100/50/sports/1/"> 
    <img src="http://lorempixel.com/100/50/fashion/1/"> 
    <img src="http://lorempixel.com/100/50/city/1/"> 
</div> 

CSS

.small-images a, .big-images a {display:inline-block} 
.small-images a.selected {border:1px solid red} 

当前的jQuery代码

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
}); 

Answer 1

你的CSS正在寻找a个标签与selected类不img标签：

此：

.small-images a.selected {border:1px solid red} 

应更改为：

.small-images .selected {border:1px solid red} 

以外，你只需要添加和删除点击selected类：

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var $this = $(this), 
      index = $this.index(); 
     $(".small-images img").removeClass('selected'); 
     $this.addClass('selected'); 
     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
}); 

这是演示：http://jsfiddle.net/Qhdaz/6/

修订

我建议通过缓存$(".small-images img")的选择，因为它会在每个click事件处理程序使用优化的代码位：

$(function(){ 
    var $thumbnails = $(".small-images img"); 

    //this will add the `selected` class to the first thumbnail on-load 
    $thumbnails.eq(0).addClass('selected'); 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $thumbnails.click(function(e){ 

     //cache the `$(this)` selector since it will be used more than once 
     var $this = $(this), 
      index = $this.index(); 

     //remove `selected` class from all thumbnails 
     $thumbnails.removeClass('selected'); 
     //add `selected` class to selected thumbnail 
     $this.addClass('selected'); 

     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
}); 

这里是一个演示：http://jsfiddle.net/Qhdaz/12/

这里是你的代码优化，快速运行：

CSS--

/*this will hide the full-sized images by default to take care of the flickering on-load*/ 
#big-image img { 
    display : none; 
} 

JS--

$(function(){ 

    //cache both the thumbnails and the full-sized images so when we do work on them we don't have to wait for the performance hating selector to do it's magic 
    var $thumbnails = $(".small-images img"), 
     $fullsized = $("#big-image img"); 

    //add `selected` class to first thumbnail 
    $thumbnails.eq(0).addClass('selected'); 

    //show first full-sized image (no 
    $fullsized.eq(0).show(); 

    //add `click` event handlers to all the thumbnails 
    $thumbnails.click(function(e){ 

     //cache the `$(this)` selector since it will be used more than once 
     var $this = $(this), 
      index = $this.index(); 

     //remove the `selected` class from all thumbnails 
     $thumbnails.removeClass('selected'); 

     //add the `selected` class to selected thumbnail 
     $this.addClass('selected'); 

     //hide all the full-sized images and show the currently selected index 
     $fullsized.hide().eq(index).show(); 
    }); 
}); 

演示：http://jsfiddle.net/Qhdaz/13/

Answer 2

可以实现通过下面的代码：

$(function(){ 
    var selected; 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $("#big-image img").eq(index).show().siblings().hide(); 
     if (typeof selected !== 'undefined') { 
      selected.removeClass('selected'); 
     } 
     $(this).addClass('selected'); 
     selected = $(this); 
    }); 
}); 

如果你有这些类：

.small-images a, .big-images a {display:inline-block} 
.small-images .selected {border:1px solid red} 

在匿名函数的第一行中，您将定义要保留当前所选图片的变量。

随着如果你正在检查是否已经有任何选择的拇指，所以如果这样的拇指存在，你删除它的边框，边框添加到新的和使其选择的条件。

Answer 3

---- UPDATED VERSION ---- 如果你不需要任何动画，你可以使用更多的CSS。 这个例子显示了一些CSS3样式和一个简短的jQuery脚本来改变图像。

http://jsfiddle.net/pixelass/hzLfV/7/

jQuery的

$(function() { 
    $(".small-images img").click(function() { 
     $('.selected').removeClass('selected'); 
     var index = $(this).index(); 
     $("#big-image img.active").removeClass('active'); 
     $("#big-image img").eq(index).addClass('active'); 
     $(this).addClass('selected'); 
    }); 
}); 

CSS

#wrapper { 
    height:280px; 
    width:420px; 
    background:#fff; 
    overflow:none; 
} 
#big-image { 
    height:220px; 
} 
#big-image img { 
    position:absolute; 
    top:5px; 
    left:5px; 
    display:none; 
    box-shadow:0 4px 4px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 4px 4px rgba(0,0,0,0.8); 
    -webkit-box-shadow:0 4px 4px rgba(0,0,0,0.8); 
    -o-box-shadow:0 4px 4px rgba(0,0,0,0.8); 
} 
#big-image img.active { 
    display:block; 
} 
.small-images { 
    position:absolute; 
    top:220px; 
    left:5px; 
    height:60px; 
} 
.small-images img { 
    border:5px solid white; 
    box-shadow:0 2px 2px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.8); 
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.8); 
    -o-box-shadow:0 2px 2px rgba(0,0,0,0.8); 
    display:inline; 
    display:inline-block; 
    float:left; 
    margin:0 5px 0 0; 
} 
.small-images img.selected { 
    border:5px solid #888; 
} 

HTML

<div id="wrapper"> 
    <div id="big-image"> 
     <img src="http://lorempixel.com/400/200/sports/1/" class="active"> 
     <img src="http://lorempixel.com/400/200/fashion/1/"> 
     <img src="http://lorempixel.com/400/200/city/1/"> 
    </div> 

    <div class="small-images"> 
     <img src="http://lorempixel.com/100/50/sports/1/" class="selected"> 
     <img src="http://lorempixel.com/100/50/fashion/1/"> 
     <img src="http://lorempixel.com/100/50/city/1/"> 
    </div> 
</div>