如何在这里动态地将类.selected添加到所选元素？

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

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

HTML

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正在寻找带有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

—-更新版本—-如果你不需要任何动画，你可以使用更多的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

Answer 3

您可以通过以下代码实现：

 $(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} 

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

使用if条件，您正在检查是否已经有任何选定的拇指，因此如果存在这样的拇指，您将删除它的边框，为新的边框添加边框并将其选中。