商品画像の一覧を表示するショッピング サイトの商品閲覧ページがあります。
一部の製品にはカラー オプションがあり、これらのカラー オプションの画像は、関連するカラー ボックスをクリックすると表示されます。メインの製品画像は、関連する色付きの製品画像に置き換えられます。
以下のjqueryコードを使用して、この製品画像の交換を行い、さらに画像をホバリングしたときに表示されるホバー画像のURLを渡します(別のコードで行われます)
// change browse image on child colour box click
jQuery(function() {
jQuery('div[child-image]').click(function(event) {
jQuery('img[id~=product-browse-image-'+event.target.id+']')
.attr('src', jQuery(this).attr('child-image'))
.attr('hover-image', jQuery(this).attr('child-hover-image'))
}).each(function() {
jQuery('<img />').attr('src', jQuery(this).attr('child-image'));
});;
});
店内の商品を色でフィルタリングすることもできます。
&colour=RED1たとえば、これが行われると、URLに追加されます
この変数を使用して、値「RED1」またはページの読み込み時に表示される値に基づいて画像を切り替えたいので、製品に赤い色のオプションがある赤いアイテムをフィルタリングすると、赤い画像が表示されます。赤で販売されたばかりの製品は、すでに赤で唯一の画像を表示しています。
この場合、関連する画像を保持する色付きのボックスは、次のように置き換えます。
<div id="1" class="child-colour RED1" child-image="/images/BC_00000475_190x253.jpg" child-hover-image="/BC_00000474_190x253.jpg"></div>
URL から変数値を取得できます。この説明のために、「値」とします。
したがって、ある時点でこれを使用する必要があると思います。
div[class^="child-colour '+value+'"]
しかし、それとは別に、上記のコードを使用して説明したことを達成する方法がわかりません。