1
我有复选框。当我检查一个时，它会根据所有数量的复选框填充颜色按钮。那很简单。问题是，当我获得100％的填充按钮时，if语句使按钮变为绿色。但我无法弄清楚。有人可以告诉我，为什么它如此。根据勾选的复选框填充颜色背景颜色？
$('input').on('change', function(){
countEl = 100/$('ul li input').length;
countCheckEl = $('ul li input:checked').length * countEl;
$('.count').text(countCheckEl)
$('.button-fill').css({
'width': '' + countCheckEl + '%'
})
if($('.button-fill').outerWidth(true) == 100){
$('.button-fill').css('background', '#43AA8B')
}
console.log($('.button-fill').width())
})* {
box-sizing: border-box
}
body {
background: #DB504A;
font-family: "Open Sans", sans-serif;
color: #FF6F59
}
.wrapper {
max-width: 600px;
margin: 50px auto;
background: #fff;
box-shadow: 0 0 20px -5px rgba(0,0,0,.3);
padding: 20px;
}
.button {
border: 2px solid #FF6F59;
display: inline-block;
padding: 10px 20px;
margin: 10px 0;
position: relative;
z-index: 2;
color: #254441
}
.button-fill {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #FF6F59;
z-index: -1;
transition: linear 300ms
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li><input type="checkbox" name="" id="" /></li>
<li><input type="checkbox" name="" id="" /></li>
<li><input type="checkbox" name="" id="" /></li>
<li><input type="checkbox" name="" id="" /></li>
<li><input type="checkbox" name="" id="" /></li>
<li><input type="checkbox" name="" id="" /></li>
</ul>
<div class="button" data-fill="100">
<div class="button-fill">
</div>
Button
</div>
</div>