javascript - 如何在jQuery中选择HTML5数据属性？

Question

我当前的 jQuery 选择 value 属性。如何更改 jQuery 以选择数据属性“data-price”？

$('#trapfabric, #trapsize').on('change', function() {
  var $selected = $('#trapfabric, #trapsize').children(":selected");
  sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
  $('#priceToSwap3').html('$' + sum
    );
});

我知道我必须在上面添加类似的内容，但我无法让它工作:

$('#priceToSwap3').text($selected.data("price"))

已编辑

我的 HTML:

<span id="priceToSwap3"">$238</span>

<select id="trapsize" onChange="swapImage()">
 <option data-price="238">foo</option>
 <option data-price="288">foo</option>
</select>

<select id="trapfabric" onChange="swapImage()">
 <option data-price="0">foo</option>
 <option data-price="20">foo</option>
</select>

Answer 1

我相信这就是你想要的:

var $elements = $('#trapfabric, #trapsize');
$elements.on('change', function() {
     var $selected = $elements.children(":selected");
     var sum = 0;

     $selected.each(function() {
         sum += $(this).data('price');
     });

     $('#priceToSwap3').html('$' + sum);
});

您必须迭代所选元素才能获取每个元素的价格数据。

DEMO