javascript - 根据 div 的值填充 div

Question

html

<li title="State - IpAddress">
    <div>
        <div class="inline">
            <div class="circlecolor" class="no-class"></div>  
        </div>
        <div class="inline">
            <div class="state-ip" data-value="%s">
                <span>%s - %s</span>
            </div>
        </div>
        <a href="#showInfo" class="popover-control">
            <img alt="Help" height="13" src="images/questionmark.png" title="know more about states" width="13" />
        </a>
    </div>
</li>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
     $('.state-ip').each(function() {
        var mb=$(this).data('value');
        alert($(this));

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

     }
        else if(mb == "ERROR"){
                alert("Inside error");
                $(".circlecolor").removeClass().addClass("error");
        }
        else{
                alert("Inside else");
                $(".circlecolor").removeClass().addClass("impaired");
        }
    });
});
</script>

CSS

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

正在关注 Populate divs based on some value of div ，我将上面的html，css和js添加到我的元素中。问题是:

我在做

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

因此，即使根据“.state-ip”类值控制所有 if 和 else，我也可以在日志中看到它工作正常。但是为类添加颜色首先是基于 if 和所有 div。我该怎么做
$(this.circlecolor).removeClass().addClass("XXXX"); ?

因此，如果我在网页上有 2 个 div，其中 state-ip 值为“AVAILABLE”和“UNSUABLE”，那么我希望颜色分别为“GREEN”和“ORANGE”。

Answer 1

$(".circlecolor") 将查找具有类 circlecolor 的所有元素，而不管上下文如何。因此，您需要找到 .closest()列出元素然后使用 .find()在当前 (this) 元素的上下文中定位元素，如下所示。

$('.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);
});