javascript - すべてのリスト属性値を 1 つの名前で入力します

Question

私のリストには、「data-pic」、「data-audio」、「data-word」という属性があります...

<li data-audio="sounds/words/black.wav" data-pic="images/words/black.png" data-word="black"></li>

「黒」を別のものに変更する場合、HTML から新しい単語を 1 回入力するだけですべての属性を変更できる方法はありますか?

Answer 1

jQueryを使用する別の、おそらくより短い方法：

$.each($("li").data(), function(key, value) {
    data[key] = value.replace("black", "white");
});

フィドルの例

ただし、「黒」以外のプレースホルダー値を使用することをお勧めします。

Answer 2

JavaScript関数を使用できます..

function writeLi(color){
    return '<li data-audio="sounds/words/'+color+'.wav" data-pic="images/words/'+color+'.png" data-word="'+color+'"></li>'
}

どのようにそのことについて？

Answer 3

これも機能します：

var elem = $("li")[0];
var attrs = elem.attributes;
for(var i=0;i<attrs.length;i++) {
   $(elem).attr(attrs[i].nodeName,attrs[i].nodeValue.replace(/black/gi,'white'));                                               
}
​

Answer 4

属性配列を利用できます。これは単純な例にすぎません。状況によっては、このような単純な置換以外に「黒」を置換するためのより高度な方法が必要になる場合があります。

var el = document.getElementById("yourList");
for( var i = 0, max = el.attributes.length; i < max; i++ ){
 if( el.attributes[i].nodeName.indexOf("data") > -1 ){
  el.attributes[i].nodeValue.replace("black","newValue");
 }
}

Answer 5

次のように実行できます。

var myWord = $('li').data('word');
var newWord = 'blue';

$('li').data('word', newWord);

$('li').data('audio', $('li').data('audio').replace(myWord, newWord));
$('li').data('pic', $('li').data('pic').replace(myWord, newWord));

しかし、これは悪いアプローチです。最良の方法は次のとおりです。

$('li').data('word', 'yellow');
$('li').data('audio', 'sounds/words/yellow.wav');
$('li').data('pic', 'images/words/yellow.png');

Answer 6

jQuery:

$('div.#ContainerName li').each(function(a,li) {
  if(this.attr('data-word') == 'black') {
    li.attr('data-word', yourNewValueHere)
    li.attr('data-audio', yourNewValueHere1)
    li.attr('data-pic', yourNewValueHere2)
  }
});

必要に応じて、containername を使用してスコープを制限します (そうしないと、すべての LI がチェックされ、多すぎる/遅すぎる/望ましくない可能性があります)。