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

如果要获取需要使用的元素#trapsize，则将事件绑定到两个元素；#trapfabricsource$(this)

jsfiddle

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

Answer 2

我相信这就是你想要的：

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每个元素的数据。

演示

Answer 3

我们有一个类似的场景，我们为每个输入分配安全值（1,2,3 作为安全级别）。当用户登录系统时，我们必须更改安全值“0”。

例如：

<input type="text" security="3" id="super-admin" />
<input type="text" security="2" id="main-admin" />
<input type="text" security="1" id="normal-user" />

<script>
function userValidation(userType){

if(userType="super-admin"){
   $("[security=1]").attr("security", 0);
   $("[security=2]").attr("security", 0);
   $("[security=3]").attr("security", 0);
 }
if(userType="main-admin"){
  $("[security=1]").attr("security", 0);
  $("[security=2]").attr("security", 0);
 }
 if(userType="normal-user"){
   $("[security=1]").attr("security", 0);
 }
}
<script>