jquery - 计算具有变化值的多个 div

标签 jquery html

为了方便起见，我想将我工作中使用的工作表转换为网络应用程序。该工作表记录了不同的犯罪行为和犯罪历史，并为每个犯罪行为和犯罪历史提供了分数。然后计算这些分数，然后可以使用总分来确定被判有罪的人是否会立即入狱。由于多个值选项和我的基础知识，我在计算单独的变量以获得总数时遇到一些困难。 

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

关于jquery - 计算具有变化值的多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56943701/

上一篇：php - 如何在 Laravel 中发送单选按钮值而不提交？

下一篇：jquery - 我使用 Jquery 添加 src 属性，但它的工作方式有所不同。为什么？

相关文章：

javascript - (jQuery)滚动事件..如果用户滚动页面，我想将文档滚动到指定的点

java - 使用 Spring 在 Jquery 中上传图像？

html - 显示时Struts2中的html标签问题

javascript - HTML 中的双弹出窗口

javascript - 使用 jQuery 查找并操作存储在变量中的 HTML DIV 元素

javascript - 使用javascript将div的内容更改为许多文本字段

jquery - 获取下拉选择列表以在选择后保持扩展状态

javascript - CSS 页脚位置

javascript - 多个加号和减号按钮

python - 如何在我的应用程序页面中模拟浏览器后退箭头？

©2024 IT工具网  联系我们