jquery - 计算具有变化值的多个 div
问题描述
为了方便起见，我想获取我工作中使用的工作表并将其转换为 Web 应用程序。该工作表记录了不同的犯罪和犯罪历史，并为每个提供了分数。然后计算这些分数，然后总分可用于确定被判有罪的人是否会立即入狱。由于多个值选项和我的基本知识，我在计算单独的变量以获得总数时遇到了一些困难。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<fieldset>
<legend>Drug Prison In/Out Worksheet</legend>
<div id="drugMSCO">
<label>Most Serious Conviction Offense</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option>Class A Offenses</option>
<option value="8" class="form-control prc">Manufacturing Controlled Substance 1st Degree</option>
<option>Class B Offenses</option>
<option value="5" class="form-control prc">Manufacturing Controlled Substance 2nd Degree</option>
<option value="5" class="form-control prc">Possession with Intent to Distribute Controlled Substance</option>
<option value="6" class="form-control prc">Sale/Distribution of Marijuana</option>
<option value="6" class="form-control prc">Sale/Distribution of Schedule I-V</option>
<option>Class C Offenses</option>
<option value="2" class="form-control prc">Felony DUI</option>
<option value="2" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(1)</option>
<option>Class D Offenses</option>
<option value="1" class="form-control prc">Possession of Controlled Substance</option>
<option value="1" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(2)</option>
</select>
</div>
<br>
<div id="drugNPAFC">
<label>Number of Prior Adult Felony Convictions</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="2" class="form-control prc">1</option>
<option value="3" class="form-control prc">2</option>
<option value="5" class="form-control prc">3</option>
<option value="6" class="form-control prc">4</option>
<option value="7" class="form-control prc">5</option>
<option value="7" class="form-control prc">6</option>
<option value="7" class="form-control prc">7</option>
<option value="7" class="form-control prc">8</option>
<option value="7" class="form-control prc">9</option>
<option value="7" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugNPACMV" >
<label>Number of Prior Adult Convictions for Misdemeanors or Violations</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="0" class="form-control prc">1</option>
<option value="1" class="form-control prc">2</option>
<option value="1" class="form-control prc">3</option>
<option value="1" class="form-control prc">4</option>
<option value="1" class="form-control prc">5</option>
<option value="2" class="form-control prc">6</option>
<option value="2" class="form-control prc">7</option>
<option value="2" class="form-control prc">8</option>
<option value="2" class="form-control prc">9</option>
<option value="3" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugPIUSI1YM">
<label>Prior Incarcerations with Unsuspended Sentence Imposed of 1 Year or More</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">No</option>
<option value="0" class="form-control prc">Yes</option>
</select>
</div>
<br>
<div id="drugPFPPR">
<label>Prior Felony Probation or Parole Revocation</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">No</option>
<option value="1" class="form-control prc">Yes</option>
</select>
</div>
<br>
<div id="drugNPJDYOA">
<label>Number of Prior Juvenile Delinquency or YO Adjudications (Violation/Misd/Felony)</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="1" class="form-control prc">1</option>
<option value="1" class="form-control prc">2</option>
<option value="2" class="form-control prc">3</option>
<option value="2" class="form-control prc">4</option>
<option value="3" class="form-control prc">5</option>
<option value="3" class="form-control prc">6</option>
<option value="3" class="form-control prc">7</option>
<option value="3" class="form-control prc">8</option>
<option value="3" class="form-control prc">9</option>
<option value="3" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugPUDWDI">
<label>Possession/Use of Deadly Weapon or Dangerous Instrument</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0">No</option>
<option value="2">Yes</option>
</select>
</div>
<div class="drug-in-out">
<label>Total In/Out Worksheet Score</label>
<br>
<output id="drug-io-result"></output>
</div>
</fieldset>
</form>
<script src="jquery.min.js"></script>
<script>
$('.drug-in-out').on('input', '.prc', function(){
var totalSum=0;
$('.drug-in-out .prc').each(function()){
var inputVal=$(this).val();
if($.isNumeric(inputVal)){
totalSum += parseFloat(inputVal);
}
});
$('#drug-io-result').val(totalSum);
});
</script>
</body>
</html>
我希望每个选择都会产生一个值，当与其他选择相加时会在屏幕底部旁边弹出一个数字，但没有弹出数字。
解决方案
需要进行一些更改：
更改
.on('input', ...)为.on('change', function(){...})$('.drug-in-out .prc').each(...);并改变$('.drug-in-out').each(...);此外，为了避免用户在 中选择“标题”
select，您可以disable像这样：<option disabled>--- Class A Offenses ---</option>
请参阅下面的演示：
更新
根据评论进行了更新，以根据计算的总和显示来自预定对象数组的建议值。
$(function() {
$('.drug-in-out').on('change', function() {
var totalSum = 0;
$('.drug-in-out').each(function() {
var inputVal = $(this).val();
if ($.isNumeric(inputVal)) {
totalSum += parseFloat(inputVal);
}
});
$('#drug-io-result').val(totalSum);
// lookup the recommended length based on guidelines
var recommendationObject = thresholdLevels.find(function(element) {
return isWithinRange(totalSum, element.min, element.max);
});
// build the output string
var recommendationString = "Suggested Level: " + recommendationObject.level + " (" + recommendationObject.months + " months)";
// display value on DOM
$('#drug-io-recommendation').val(recommendationString);
});
// Define values for None(N), Low (L), Medium (M), High (H) thresholds
// Please adjust these values as needed.
var thresholdLevels = [{
"min": 0,
"max": 41,
"level": "None",
"months": 0
},
{
"min": 42,
"max": 74,
"level": "Low",
"months": 13
},
{
"min": 75,
"max": 109,
/* or whatever the ceiling is here*/
"level": "Medium",
"months": 23
},
{
"min": 110,
/* or whatever the floor is here */
"max": 381,
"level": "High",
"months": 32
}
];
// this function determines if X is within the ranges defined by min and max values
var isWithinRange = function(x, min, max) {
return x >= min && x <= max;
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Drug Prison In/Out Worksheet</legend>
<div id="drugMSCO">
<label>Most Serious Conviction Offense</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option disabled>--- Class A Offenses ---</option>
<option value="8" class="form-control prc">Manufacturing Controlled Substance 1st Degree</option>
<option disabled>--- Class B Offenses ---</option>
<option value="5" class="form-control prc">Manufacturing Controlled Substance 2nd Degree</option>
<option value="5" class="form-control prc">Possession with Intent to Distribute Controlled Substance</option>
<option value="6" class="form-control prc">Sale/Distribution of Marijuana</option>
<option value="6" class="form-control prc">Sale/Distribution of Schedule I-V</option>
<option disabled>--- Class C Offenses ---</option>
<option value="2" class="form-control prc">Felony DUI</option>
<option value="2" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(1)</option>
<option disabled>--- Class D Offenses ---</option>
<option value="1" class="form-control prc">Possession of Controlled Substance</option>
<option value="1" class="form-control prc">Possession of Marijuana (per 13A-12-213(a)(2)</option>
</select>
</div>
<br>
<div id="drugNPAFC">
<label>Number of Prior Adult Felony Convictions</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="2" class="form-control prc">1</option>
<option value="3" class="form-control prc">2</option>
<option value="5" class="form-control prc">3</option>
<option value="6" class="form-control prc">4</option>
<option value="7" class="form-control prc">5</option>
<option value="7" class="form-control prc">6</option>
<option value="7" class="form-control prc">7</option>
<option value="7" class="form-control prc">8</option>
<option value="7" class="form-control prc">9</option>
<option value="7" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugNPACMV">
<label>Number of Prior Adult Convictions for Misdemeanors or Violations</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="0" class="form-control prc">1</option>
<option value="1" class="form-control prc">2</option>
<option value="1" class="form-control prc">3</option>
<option value="1" class="form-control prc">4</option>
<option value="1" class="form-control prc">5</option>
<option value="2" class="form-control prc">6</option>
<option value="2" class="form-control prc">7</option>
<option value="2" class="form-control prc">8</option>
<option value="2" class="form-control prc">9</option>
<option value="3" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugPIUSI1YM">
<label>Prior Incarcerations with Unsuspended Sentence Imposed of 1 Year or More</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">No</option>
<option value="0" class="form-control prc">Yes</option>
</select>
</div>
<br>
<div id="drugPFPPR">
<label>Prior Felony Probation or Parole Revocation</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">No</option>
<option value="1" class="form-control prc">Yes</option>
</select>
</div>
<br>
<div id="drugNPJDYOA">
<label>Number of Prior Juvenile Delinquency or YO Adjudications (Violation/Misd/Felony)</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0" class="form-control prc">None</option>
<option value="1" class="form-control prc">1</option>
<option value="1" class="form-control prc">2</option>
<option value="2" class="form-control prc">3</option>
<option value="2" class="form-control prc">4</option>
<option value="3" class="form-control prc">5</option>
<option value="3" class="form-control prc">6</option>
<option value="3" class="form-control prc">7</option>
<option value="3" class="form-control prc">8</option>
<option value="3" class="form-control prc">9</option>
<option value="3" class="form-control prc">10 or More</option>
</select>
</div>
<br>
<div id="drugPUDWDI">
<label>Possession/Use of Deadly Weapon or Dangerous Instrument</label>
<br>
<select class="drug-in-out">
<option>Click Here to Select from List</option>
<option value="0">No</option>
<option value="2">Yes</option>
</select>
</div>
<hr/>
<div class="drug-in-out">
<label>Total In/Out Worksheet Score:</label>
<output id="drug-io-result"></output>
<br>
<label>Recommendation:</label>
<output id="drug-io-recommendation"></output>
</div>
</fieldset>
</form>推荐阅读
- azure-devops - VSTS 仪表板的问题
- image-processing - 针织面料的图像处理
- android - 特维利奥。通话在 wifi 关闭或应用程序终止时保持活动状态
- laravel - Laravel 审计 BadMethodCallException 方法审计不存在
- validation - Grails 中的电子邮件验证
- angular - 使用 Angular 5 HttpClient Request 下载 excel 文件
- javascript - JavaScript 事件侦听器不触发拖放
- jquery - 如何获取div内部的频繁值输出？
- javascript - 错误 Wordpress jquery 表单错误说未引用的函数？
- polymer-3.x - 在 stackblitz 中找不到包，即使它存在于 npm 网站中。那怎么安装呢？