0

JavaScript を使用して一種のアイテム セレクターを作成しようとしています。セレクターは、以下のセットアップのようになります。

<label>Stone</label>
<select id="stone">
  <option value="aquamarine">Aquamarine</option>
  <option value="pink-topaz">Pink Topaz</option>
  <option value="tourmaline">Tourmaline</option>
</select>
<label>Metal</label>
<select id="metal">
  <option value="silver">Silver</option>
  <option value="platinum">Platinum</option>
  <option value="white-gold">White Gold</option>
  <option value="yellow-gold">Yellow Gold</option>
  <option value="rose-gold">Rose Gold</option>
</select>

次のような画像コンテナを使用します。

<img src="path/to/image/silver_aquamarine.jpg" id="imageToSwap">

また、JavaScript は次のようになります。

$('#stone, #metal').on('change', function() {
  $('#imageToSwap').prop('src', ['path/to/image/', $('#metal').val(), '_',     $('#stone').val(), '.jpg'].join('')    
  );
});

そして、それはすべてうまく機能しています。私が疑問に思っているのは (これにアプローチする方法がわからないことを事前にお詫びします)、画像に関連付けられている他の値を取り込む方法があるということです。たとえば、その選択に関連付けられた価格を持ち込むことはできますか?

それとも、まったく別の方法でこれにアプローチする必要がありますか? たぶん、画像、価格、石、金属を含むアイテムの配列で、選択に基づいて表示されますが、フィルターに似たものを使用していますか?

また、オプションが存在しない場合のフォールバックを作成する必要があります。アクアマリン + ローズ ゴールド以外のすべての組み合わせが存在するとします。「オプションが存在しません」というメッセージを追加するにはどうすればよいですか?

ここで何か助けていただければ幸いです。

4

2 に答える 2

0

商品の価格がわかっている場合は、データ属性を使用してそれらをオプションに添付し、jQuery を使用してそれらにアクセスできます。ここに実用的なフィドルがあります: http://jsfiddle.net/PM6qu/

<label>Stone</label>
<select id="stone">
  <option value="aquamarine"  data-stone-price = "2">Aquamarine</option>
  <option value="pink-topaz"  data-stone-price = "3">Pink Topaz</option>
  <option value="tourmaline"  data-stone-price = "4">Tourmaline</option>
</select>
<label>Metal</label>
<select id="metal">
  <option value="silver" data-metal-price = "2">Silver</option>
  <option value="platinum" data-metal-price = "4">Platinum</option>
  <option value="white-gold" data-metal-price = "3">White Gold</option>
  <option value="yellow-gold" data-metal-price = "3">Yellow Gold</option>
  <option value="rose-gold" data-metal-price = "3">Rose Gold</option>
</select>

<img src="path/to/image/silver_aquamarine.jpg" id="imageToSwap">
<div id="price"></div>

データ属性へのアクセス:

$('#stone, #metal').on('change', function() {
  $('#imageToSwap').prop('src', ['path/to/image/', $('#metal').val(), '_',     $('#stone').val(), '.jpg'].join('')    
  );
    alert($('#stone option:selected').data('stone-price') + $('#metal option:selected').data('metal-price'));
});
于 2013-07-15T18:31:38.987 に答える