Javascript 根据div的值填充div html

下面，我将上述html、css和js添加到我的项目中。问题是：

我在做什么

div.no-class{
background-color: #808080;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

 div.success{
background-color: #009933;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
 div.error{
background-color: #FF3300;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

div.impaired{
background-color: #FF9900;
width: 12px;
    height: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

所以，即使控件基于“.state ip”类值转到所有if和else，我也可以在日志中看到它工作正常。但为类添加颜色是基于所有div的第一个if和。我如何做类似

$（this.circlecolor.removeClass（）.addClass（“XXXX”）

所以，如果我在网页上有两个div，其中state ip值为“AVAILABLE”和“UNSUABLE”，那么我希望颜色分别为“GREEN”和“ORANGE”。
您可以使用来实现您想要的：

$('circlecolor').removeClass().addClass("XXXX");

$（“.circlecolor”）
将查找具有类
circlecolor
的所有元素，而不考虑上下文。因此，您需要找到列表项，然后在当前（
this
）元素的上下文中使用，如下所示

$(this).next('.circlecolor').removeClass().addClass(XXX);

以下是上述内容的简短版本：

$('.state-ip').each(function() {
    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");

    $circlecolor.removeClass();

    if(mb == "AVAILABLE") {
        alert("Inside if");
        $circlecolor.addClass("success");

    }
    else if(mb == "ERROR") {
        alert("Inside error");
        $circlecolor.addClass("error");
    }
    else {
        alert("Inside else");
        $circlecolor.addClass("impaired");
    }
});

您可以使用
jQuery（this）.parents（）
以数据-*选择器的parents div为目标，然后在那里找到.circle

$('.state-ip').each(function() {

    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");
    var _class = mb === "AVAILABLE" && "success" || mb === "ERROR" && "error" || "impaired";
    $circlecolor.removeClass().addClass(_class);
});

$('.state-ip').each(function() {
    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");

    $circlecolor.removeClass();

    if(mb == "AVAILABLE") {
        alert("Inside if");
        $circlecolor.addClass("success");

    }
    else if(mb == "ERROR") {
        alert("Inside error");
        $circlecolor.addClass("error");
    }
    else {
        alert("Inside else");
        $circlecolor.addClass("impaired");
    }
});

$('.state-ip').each(function() {

    var mb = $(this).data('value');
    var $circlecolor = $(this).closest("li").find(".circlecolor");
    var _class = mb === "AVAILABLE" && "success" || mb === "ERROR" && "error" || "impaired";
    $circlecolor.removeClass().addClass(_class);
});

var mb=$(this).data('value'),
parents = $(this).parents(), //you can specify how deep you want to go via DOM, using parents.eq(n) method
circle = parents.find('.circle')
console.log(circle);
alert($(this));