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/

然而，它不是crossbrowser：attr函数是IE8 +中的支持者。

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'));
});
}
});

jQuery使用数据属性更改值

3 个答案: