jquery - 使用 JQuery 更改子元素类

Question

我正在尝试更改所有 ID 为“led1”的 div 元素的类，该元素位于另一个 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 语句中的代码

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

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