admin管理员组文章数量:1026989
My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?
HTML:
<span id="priceToSwap3"">$238</span>
<select id="trapsize">
<option data-price="238">item1</option>
<option data-price="288">item2</option>
</select>
<select id="trapfabric">
<option data-price="0">item3</option>
<option data-price="20">item4</option>
</select>
jQuery:
$('#trapfabric, #trapsize').on('change', function() {
var $selected = $('#trapfabric, #trapsize').children(":selected");
sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
$('#priceToSwap3').html('$' + sum
);
});
My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?
HTML:
<span id="priceToSwap3"">$238</span>
<select id="trapsize">
<option data-price="238">item1</option>
<option data-price="288">item2</option>
</select>
<select id="trapfabric">
<option data-price="0">item3</option>
<option data-price="20">item4</option>
</select>
jQuery:
$('#trapfabric, #trapsize').on('change', function() {
var $selected = $('#trapfabric, #trapsize').children(":selected");
sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
$('#priceToSwap3').html('$' + sum
);
});
Share
Improve this question
edited Dec 24, 2015 at 13:14
Brian Tompsett - 汤莱恩
5,89372 gold badges61 silver badges133 bronze badges
asked Mar 1, 2013 at 12:07
Elijah YangElijah Yang
2651 gold badge8 silver badges16 bronze badges
3
-
2
Or, even better,
.data('price')
– Matteo Tassinari Commented Mar 1, 2013 at 12:10 - 1 possible duplicate of How to select the HTML5 data attribute in jQuery? – Roko C. Buljan Commented Mar 1, 2013 at 12:13
- @roXon yes it's a duplicate because I didn't phrase my question properly in the last post and hence it was confusing. – Elijah Yang Commented Mar 1, 2013 at 12:16
7 Answers
Reset to default 4To fetch the data attribute $(el).data('price')
var sum = $('#trapsize option:selected').data('price') + $('#trapfabric option:selected').data('price');
Demo: Fiddle
try this
$('#trapsize option:selected').data('price');
using your code
$('#trapfabric, #trapsize').on('change', function() {
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
$('#priceToSwap3').html('$' + sum);
});
example fiddle here
$('option').attr('data-price');
You can use jquery attr
$("your dom").attr("data-price")
Try:
$('#trapsize option:selected').data('price');
$('#trapfabric option:selected').data('price');
And your function should be;
$('#trapfabric, #trapsize').on('change', function() {
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
$('#priceToSwap3').html('$' + sum);
})
attr("data-price");
or
data("price");
The latter being the preferable way.
In your code it would be:
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
More about data()
here.
even you can get and set values based on the attribute
$("[data-price=238]").attr("data-price", 0);
My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?
HTML:
<span id="priceToSwap3"">$238</span>
<select id="trapsize">
<option data-price="238">item1</option>
<option data-price="288">item2</option>
</select>
<select id="trapfabric">
<option data-price="0">item3</option>
<option data-price="20">item4</option>
</select>
jQuery:
$('#trapfabric, #trapsize').on('change', function() {
var $selected = $('#trapfabric, #trapsize').children(":selected");
sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
$('#priceToSwap3').html('$' + sum
);
});
My jQuery selects the value attribute. How do I change my jQuery to select the data attribute "data-price"?
HTML:
<span id="priceToSwap3"">$238</span>
<select id="trapsize">
<option data-price="238">item1</option>
<option data-price="288">item2</option>
</select>
<select id="trapfabric">
<option data-price="0">item3</option>
<option data-price="20">item4</option>
</select>
jQuery:
$('#trapfabric, #trapsize').on('change', function() {
var $selected = $('#trapfabric, #trapsize').children(":selected");
sum = parseInt($('#trapsize').val()) + parseInt($('#trapfabric').val());
$('#priceToSwap3').html('$' + sum
);
});
Share
Improve this question
edited Dec 24, 2015 at 13:14
Brian Tompsett - 汤莱恩
5,89372 gold badges61 silver badges133 bronze badges
asked Mar 1, 2013 at 12:07
Elijah YangElijah Yang
2651 gold badge8 silver badges16 bronze badges
3
-
2
Or, even better,
.data('price')
– Matteo Tassinari Commented Mar 1, 2013 at 12:10 - 1 possible duplicate of How to select the HTML5 data attribute in jQuery? – Roko C. Buljan Commented Mar 1, 2013 at 12:13
- @roXon yes it's a duplicate because I didn't phrase my question properly in the last post and hence it was confusing. – Elijah Yang Commented Mar 1, 2013 at 12:16
7 Answers
Reset to default 4To fetch the data attribute $(el).data('price')
var sum = $('#trapsize option:selected').data('price') + $('#trapfabric option:selected').data('price');
Demo: Fiddle
try this
$('#trapsize option:selected').data('price');
using your code
$('#trapfabric, #trapsize').on('change', function() {
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
$('#priceToSwap3').html('$' + sum);
});
example fiddle here
$('option').attr('data-price');
You can use jquery attr
$("your dom").attr("data-price")
Try:
$('#trapsize option:selected').data('price');
$('#trapfabric option:selected').data('price');
And your function should be;
$('#trapfabric, #trapsize').on('change', function() {
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
$('#priceToSwap3').html('$' + sum);
})
attr("data-price");
or
data("price");
The latter being the preferable way.
In your code it would be:
sum = parseInt($('#trapsize option:selected').data('price')) + parseInt($('#trapfabric option:selected').data('price'));
More about data()
here.
even you can get and set values based on the attribute
$("[data-price=238]").attr("data-price", 0);
本文标签: javascriptHow to use data attribute with jQueryStack Overflow
版权声明:本文标题:javascript - How to use data attribute with jQuery? - Stack Overflow 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://it.en369.cn/questions/1745585910a2157593.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论