如何添加動態.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>