0

私は額縁、マウント、またはプリントとして写真製品を販売するウェブサイトを持っています。商品のサムネイル付きのグリッドに商品を表示します。

選択オプションのクラスは「cardid」で、サムネイルのクラスは「cardim」です。1ページに20個の商品があります。

顧客は、フレーム付き、マウント済み、または単にプリントとしてバスケットを追加する場合は、選択メニューを使用して選択できます。選択メニューから別のオプションを選択したときにサムネイルを変更したいのですが。

各クラスを一意にするにはどうすればよいですか？また、同じコードを複製してscript.jsでこれをどのように処理しますか？現時点では、選択オプションを変更すると、すべての画像が変更されます。

Script.js

// Event handler for picture selector
$('.cardid').change(function() {
    $(".cardim").attr("src", "images/products/thumb/new-image.jpg");
});

サムネイル画像のコードです。

<a class="card_thumb" href="img/products/large/<?php echo $cims[0];?>" title="<?php echo $product['Products_SKU'];?>"><img src="img/products/thumb/<?php echo $cims[0];?>" class="cardim" alt="<?php echo $product['Products_SKU'];?>"></a>

そして、選択のためのコードのスニペット

<option value="' . $row['Products_ID'] . '">'. $selector[$key] .'</option>
4

1 に答える 1

1

クラスは一意ではありません。ID は一意なので、a タグのように ID を使用します

<a class="card_thumb" href="img/products/large/<?php echo $cims[0];?>" title="<?php echo $product['Products_SKU'];?>"><img src="img/products/thumb/<?php echo $cims[0];?>" class="cardim" alt="<?php echo $product['Products_SKU'];?>" id="<?php echo $product['Products_ID'];?>"></a>

そしてスクリプトを使用します

$('.cardid').change(function() {
     var getId = $(this).attr('id');
    $("#"+getId).attr("src", "images/products/thumb/new-image.jpg");
});

ジェイミー・テイラーに感謝

于 2013-01-23T10:36:53.790 に答える