javascript - 根据div的值填充div

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”类值进行，我也可以在日志中看到它运行正常。但是，为类添加颜色是基于所有div的前提。我该怎么做
    $(this.circlecolor).removeClass().addClass("XXXX");吗？

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

最佳答案

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