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/

ただし、クロスブラウザーではありません。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'));
});
}
});