Question

我正在尝试更改所有div元素的类，其id为“led1”，它位于另一个id为1的div中。

<div class="MACHINE">
  <div id="1" class="HOST">EMPTY
    <div id="led1" class="LED"></div>
  </div>
</div>

我使用以下代码，但它只更改文本“EMPTY”而不是类。下面是我的一块js文件用来改变类。由于某种原因，它不起作用......

我希望有人能指引我走向正确的方向。

$.each(data, function(hst) {
    $.each(data[hst], function(key, value){
        var currClass =  $('#led'+ key).attr('class');
        switch(value)
        {
           case 'EMPTY': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$('#' + key).html(value);break;
           case 'PROCESSING': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$('#' + key).html(value);break;
           case 'FINISHED': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$('#' + key).html(value);break;
           case 'REPLACE': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$('#' + key).html(value);break;
         }
      });
   });
   },
   error: function() {
     alert('Ello');
     console.log("ERROR: show_host_status")     
   },
 });
},   
}

Answer 1

我发现了一个问题。

 case 'EMPTY': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$('#' + key).html(value);break;

它将“HOST”的HTML设置为任何值（从而移除LED）。尝试这样的事情。

<div class="MACHINE">
    <div id="1" class="HOST">
        <div class='host-value'>EMPTY</div>
        <div id="led1" class="LED"></div>
    </div>
</div>

和案例陈述中的代码为

 case 'EMPTY': $('#led' + key).removeClass(currClass).addClass('LED ' + value);$(".host-value", $('#' + key)).html(value);break;

然后你必须改变你获得“价值”的方式，因为它不仅仅是直接元素来自#key .host-value

Answer 2

正如其他回应中指出的那样，答案是技术上的：

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".")。

道歉：@dgvid

尝试将<div id="1">更改为<div id="host-1">并相应地更新您的脚本

使用JQuery更改子元素类

2 个答案: