選択した要素にクラス.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のコードあなたのCSSは探している

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

の例を参照してください

この：selectedクラスではありませんimgタグ付き個のタグ

あなたがクリックするだけで selectedクラスを追加し、削除する必要があること以外

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

：

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

がに変わります

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

デモ：ここ

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

はデモです：それは、各clickイベントハンドラで使用されますので、私は$(".small-images img")選択をキャッシュすることで、コードを少し最適化することをお勧め

を更新しhttp://jsfiddle.net/Qhdaz/6/

：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} 

匿名関数の最初の行では、現在選択されている画像を保持する変数を定義しています。

if条件では既に選択されている親があるかどうかを確認しています。そのような親が存在する場合は、その境界を削除して、新しいものに境界を付けて選択します。

Answer 3

----更新バージョン---- アニメーションが不要な場合は、さらに多くの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>