0

たくさんの商品を掲載したページを用意しています。色見本をクリックして、商品の色を変更できます。色見本/製品スイッチはすべて、フォト ギャラリー プラグインで設定されています。黒い電話を見ている場合、黒い色の見本には「選択済み」のクラスがあるようにしようとしています.

ここに私のHTMLコードがあります:

<div class='swatches'>
       <a href='{..}images/phones/products/droid-razr-m-black.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-black.gif' alt='Black' class='selected'/></a>
       <a href='{..}images/phones/products/droid-razr-m-white.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-white.gif' alt='White'/></a>
       <a href='{..}images/phones/products/droid-razr-m-blue.jpg' rel='enlargeimage' rev='targetdiv:loadarea1,trigger:click,preload:yes,fx:none'><img src='{..}images/verizonspecials/phones/swatch-blue.gif' alt='Blue'/></a>
 </div>

ページに複数のアイテムがあるため、スウォッチ div が何度も複製されます。私はこのjqueryから始めました：

$(document).ready(function(){
$('.swatches img').click(function() {
    $('img.selected').removeClass('selected');
    $(this).addClass('selected');
});
});

ただし、その特定のスウォッチ div 内の画像だけでなく、すべての画像から選択したクラスが削除されました。それで、私はこれを試しました：

$(document).ready(function(){
$('.swatches img').click(function() {
    $(this).siblings().removeClass('selected');
    $(this).addClass('selected');
});
});

しかし、それは何もしませんでした-クリックしたすべての画像は「選択済み」のクラスを取得しますが、クラスは他の画像から削除されることはありません。

4

2 に答える 2

0

これらの内部イメージは、swatches div の兄弟ではなく、その子です。また、右の子に「選択済み」を追加する必要があります

$('.swatches').click(function(event) {
  var clicked = event.target;
  $(this).children().children().removeClass('selected');
  $(clicked).addClass('selected');
});

これは機能するはずですが、IMO より良い解決策は、オーバーレイ画像 (セレクター ボックスなど) と透明度を備えた「選択」div を作成し、クラスを割り当てて削除する代わりに、クリック時にその div の位置を正しい色に移動することです。

于 2013-07-11T22:11:36.557 に答える
0

画像はアンカー要素に埋め込まれているため、兄弟はありません。使用する

$("img", ($(this).parent().parent())[0]).removeClass('selected');

その代わり。

于 2013-07-11T22:16:31.517 に答える