jQuery使用数据属性改变值

jQuery Change Value Using Data Attribute

本文关键字：改变 数据属性 jQuery      更新时间：2023-09-26

我有多个元素，将有相同的数据属性，但不同的值，我怎么能让jQuery改变值?

下面是一些HTML示例:

<div data-one="test" data-two="test2"></div>
<div data-one="testing" data-two="hello"></div>
<div data-one="yo" data-two="test3"></div>

默认情况下，我希望div的值为data-one，但是当active类在body标签上时，我希望它将所有值更改为data-two值。

我想把值存储为一个变量，这将更容易，虽然div没有任何ID，他们分散在DOM周围，这使得它很困难。

到目前为止，我有这个:

if($('body').hasClass('active')) {
  $('div').html($(div).data('two'));
}

您可以使用html方法。

var has = $('body').hasClass('active');
$('div').html(function() {
    return has ? $(this).data('two') : $(this).data('one');
});
http://jsfiddle.net/44Du5/

CSS唯一解决方案:

body div:after {
    content: attr(data-one);
}
body.active div:after {
    content: attr(data-two);
}
http://jsfiddle.net/dfsq/gaeUR/

但是它不是跨浏览器的:IE8+支持attr函数

查看此链接:http://jsfiddle.net/rjR6q/

$(document).ready(function(){
if($('body').hasClass('active')) {
$('div').each(function(){
    $(this).html($(this).data('two'));
});
}
 else
{
$('div').each(function(){
    $(this).html($(this).data('one'));
});
}
});
相关文章：