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”。
最佳答案
$(".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);
});
关于javascript - 根据 div 的值填充 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32956679/