如何选择jQuery中的HTML5数据属性？

Question

我当前的jQuery选择值属性。如何更改我的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")) 

EDITED

我的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); 
}); 

你必须遍历所选元素，以获得price基准他们每个人。

DEMO

Answer 2

如果您想获得，请联系#trapsize,您需要使用的元素$(this);

jsfiddle

$('#trapfabric, #trapsize').on('change', function() {  
    $('#priceToSwap3').text('$' + $(':selected', this).data("price")); 
});