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

How to select the HTML5 data attribute in jQuery?

本文关键字：选择 HTML5 数据属性 jQuery      更新时间：2023-09-26

我当前的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>

我相信这就是你想要的:

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数据。

您将事件绑定到两个元素#trapsize, #trapfabric，如果您想获得source元素，则需要使用$(this);

jsfiddle 

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

我们有一个类似的场景，其中我们为每个输入分配安全值(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>
相关文章：