javascript - jQuery 使用数据属性更改值

Question

我有多个元素具有相同的数据属性但具有不同的值，如何让 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'));
}

Answer 1

你可以使用html方法。

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

http://jsfiddle.net/44Du5/

Answer 2

仅 CSS 解决方案：

body div:after {
    content: attr(data-one);
}
body.active div:after {
    content: attr(data-two);
}

http://jsfiddle.net/dfsq/gaeUR/

但是它不是跨浏览器：在 IE8+ 中支持attr函数。

Answer 3

检查此链接：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'));
});
}
});