1

option画像と価格の2つを変更してほしい。ただし、オプションvalueは1つしかないため、jQueryの1つだけが機能します。に複数の値を含めるにはどうすればよいoptionですか？それができない場合、解決策は何ですか？

HTML：

<select id="panelfabric" onChange="swapImage()">
    <option value="$168">Normal</option>
</select>

jQuery：

// select panel image
$('#panelfabric').on('change', function() {
  $('#imageToSwap2').prop('src', 
    ['img/panel/', $('#panelfabric').val(), '.png'].join('')    
    );
});

// select panel price
$('#panelfabric').on('change', function () {
  $('#priceToSwap2').text($(this).val()
    );
});

PS画像に$168.pngという名前を付けることができないため、解決策にはなりません。

4

2 に答える 2

1

<option>1つの解決策は、 HTML5データ属性の使用に必要な数の情報を添付することです。

<option value="whatever" data-price="$168" data-image="http://...">
    Normal
</option>

その後：

$('#panelfabric').on('change', function() {
  var $selected = $('#panelfabric').children(":selected");

  $('#imageToSwap2').prop('src', $selected.data("image"));
  $('#priceToSwap2').text($selected.data("price"));
});
于 2013-02-28T21:34:27.993 に答える
1

私はジョンのdata-XXX解決策を選びます。もう1つのオプションは、Javascriptにマッピングテーブルを配置することです。

var item_data = {
    "whatever": { price: 168, image: "http://..." },
    "something": { price: 200, image: "http://..." },
    ... };

その後：

$("#panelfabric").on("change", function() {
    var item = $(this).val();
    $('#imageToSwap2').prop('src', item_data[item].image);
    $('#priceToSwap2').text('$'+item_data[item].price);
});
于 2013-02-28T21:45:02.933 に答える