使用复选框跟踪两个进度条的平均值

Question

我正在开发一个非常重要的项目，用户可以通过复选框更改两个元素的“压力”值。 这些复选框有两个不同的值，一个用于bar-one，第二个用于bar-two。所有这些系统都有一个“状态面板”，显示是否一切正常，或者是否存在问题。

请注意，我不必使用回显或警报消息，因为我需要根据两个栏的当前状态显示不同的 div。

我在 sn-p 中尽了最大努力，我是 JavaScript 新手，所以请不要对我的错误刻薄。

var 
    even = $('.even'),
    high = $('.high'),
    low = $('.low');

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.bar-one').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

if (average === 5) {
    even.show();
  } else {
    even.hide();
  }
  
if (average >= 7) {
    high.show();
  } else {
    high.hide();
  }
  
if (average <= 3) {
    low.show();
  } else {
    low.hide();
  }

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

.bar-one {
  background-color: blue;
}

.bar-two {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div class="bar-one" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div class="progress">
    <div class="bar-two" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div id="panel">
    <input type="checkbox" value1="20" value2="5">
    <input type="checkbox" value1="5" value2="20">
    <input type="checkbox" value1="10" value2="10">
    <input type="checkbox" value1="10" value2="-20">
    <input type="checkbox" value1="-20" value2="10">

</div>

<div class="even">
  Pressure is ok
</div>
<div class="high">
  Pressure is high
</div>
<div class="low">
  pressure is low
</div>

非常感谢您的帮助！

Answer 1

不确定您希望它如何进行。但我会这样做。也许看看我做了什么，你可以弄清楚你想做什么。

var 
    even = $('.even'),
    high = $('.high'),
    low = $('.low');
    
var averageCount = $("#panel").find("input").length;
var average = 0; // not sure how you are calculating average so i just added this.

updateStatus(average); // just to start message boxes as default;

$('input').on('click', function() {

    var emptyValue1 = 0;
    var emptyValue2 = 0;
    
    $('input:checked').each(function() {
        emptyValue1 += parseInt($(this).attr("data-value1"));
        emptyValue2 += parseInt($(this).attr("data-value2"));
    });
    
    
    average = (emptyValue1+emptyValue2)/averageCount;
    
    $('.bar-one').css('width', emptyValue1 + '%').attr('aria-valuenow', emptyValue1);
    
    $('.bar-two').css('width', emptyValue2 + '%').attr('aria-valuenow', emptyValue2);
    
    updateStatus(average); // update the message box
});


function updateStatus(average){
  if (average === 5) {
      even.show();
    } else {
      even.hide();
    }

  if (average >= 7) {
      high.show();
    } else {
      high.hide();
    }

  if (average <= 3) {
      low.show();
    } else {
      low.hide();
    } 
}

.progress {
  width: 100%;
  height: 30px;
  background-color: silver !important;
}

.bar-one {
  background-color: blue !important;
}

.bar-two {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="progress">
    <div class="bar-one progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"  style="width:0%">
    
    </div>
</div>
<br>
<div class="progress">
    <div class="bar-two progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
    </div>
</div>
<br>
<div id="panel">
    <input type="checkbox" data-value1="20" data-value2="5">
    <input type="checkbox" data-value1="5" data-value2="20">
    <input type="checkbox" data-value1="10" data-value2="10">
    <input type="checkbox" data-value1="10" data-value2="-20">
    <input type="checkbox" data-value1="-20" data-value2="10">

</div>

<div class="even">
  Pressure is ok
</div>
<div class="high">
  Pressure is high
</div>
<div class="low">
  pressure is low
</div>

Answer 2

您没有初始化变量平均值。我把它放在三个上，其余的代码似乎都可以工作。

var 
    even = $('.even'),
    high = $('.high'),
    low = $('.low'),
    average = 3;

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.bar-one').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

if (average === 5) {
    even.show();
  } else {
    even.hide();
  }
  
if (average >= 7) {
    high.show();
  } else {
    high.hide();
  }
  
if (average <= 3) {
    low.show();
  } else {
    low.hide();
  }

.progress {
  width: 100%;
  height: 30px;
  background-color: silver;
}

.bar-one {
  background-color: blue;
}

.bar-two {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div class="bar-one" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div class="progress">
    <div class="bar-two" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>
<br>
<div id="panel">
    <input type="checkbox" value1="20" value2="5">
    <input type="checkbox" value1="5" value2="20">
    <input type="checkbox" value1="10" value2="10">
    <input type="checkbox" value1="10" value2="-20">
    <input type="checkbox" value1="-20" value2="10">

</div>

<div class="even">
  Pressure is ok
</div>
<div class="high">
  Pressure is high
</div>
<div class="low">
  pressure is low
</div>