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>