javascript - 输入一个名称的所有列表属性值

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 输入一次新词来更改所有属性？

Answer 1

你可以使用javascript函数..

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

那个怎么样？

Answer 2

使用 jQuery 的另一种可能更短的方法：

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

示例小提琴

不过，您可能希望使用“黑色”以外的占位符值。

Answer 3

您可以利用属性数组，这只是一个简单的示例，根据您的情况，您可能需要更高级的方法来替换“黑色”，而不是像这样的直接替换。

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 4

这也有效：

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

如果需要，使用容器名称来限制范围（否则它将检查所有 LI，这可能太多/太慢/不受欢迎）