チェックボックス付きの2つのプログレスバーのトラッキング平均

Question

私は2つの要素の "圧力"の値をチェックボックスで変更できる非常に重要なプロジェクトを開発しています。 これらのチェックボックスには、2種類の値があります.1つはbar-one、もう1つはbar-twoです。このシステムにはすべて「OK」か、問題があるかどうかを示す「ステータスパネル」があります。

両方のバーの現在のステータスに応じて異なるdivを表示する必要があるため、エコーまたはアラートメッセージを使用する必要はありません。

私はスニペットでできる限りのことをしました。私は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

変数平均を初期化していません。私はそれを3つにし、残りのコードはうまくいくように見えます。

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>