Question

我有复选框。当我检查一个时，根据所有复选框的数量填充按钮。这很简单。问题是，当我获得100％填充按钮时，if语句使按钮变为绿色。但我无法弄明白。有人可以告诉我，为什么会如此。

＆＃13;

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

＆＃13;

* {
  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
}

＆＃13;

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

＆＃13;

Answer 1

实际上您需要使用countCheckEl变量来提供条件。 https://jsfiddle.net/6vmtghbh/这是结果

将条件更改为if(countCheckEl == 100 ){

根据选中的复选框填充按钮的背景颜色？

1 个答案: