javascript - 根据隐藏字段中的分数显示不同的 div

Question

我已经四处寻找了一段时间，但一无所获。我需要计算 2 个选择选项的分数 (score1 x Score2)，然后将结果存储在隐藏字段中。我正在工作，我遇到的问题是根据分数显示 DIV。我只能触发 div 来显示是否将输入更改为 TEXT 类型输入并手动更改......而不是以编程方式更改。我根据下面的实际代码整理了一些示例代码。非常感谢您的帮助。

<form action="" name="test" id="test">
    <select name="score1" id="score1" onchange="calculate()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <select name="score2" id="score2" onchange="calculate()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

    <input type="hidden" name="totalScore" id="totalScore">

    <div class="less-than-5" style="display:none;">low score</div>
    <div class="less-than-10" style="display:none;">med score</div>
    <div class="less-than-25" style="display:none;">high score</div>

    <button type="submit">Save</button>
</form>

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

<script type="text/javascript">
    calculate = function()
    {
        var score1a = document.getElementById('score1').value;
        var score2a = document.getElementById('score2').value; 
        document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
   }
</script>

<script>
    $(function() {
        $("#totalScore").bind('change', function() {
            $(".less-than-5,.less-than-10,.less-than-25").hide();
            var myValue = $(this).val();
            if(myValue  <= 5){
               $(".less-than-5").show()
            } 
            else if(myValue <= 10)
            {
                $(".less-than-10").show()
            }
            else if(myValue >= 11)
            {
                $(".less-than-25").show()
            }
        });
    });

</script>

Answer 1

为什么不直接将显示 div 的函数放在 calculate() 的末尾，它不需要是事件监听器。

        calculate = function()
        {
            var score1a = document.getElementById('score1').value;
            var score2a = document.getElementById('score2').value; 
            document.getElementById('totalScore').value = parseFloat(score1a).toFixed(2)*parseFloat(score2a).toFixed(2);;
            updateDIV();
       }

     updateDIV = function() {
                $(".less-than-5,.less-than-10,.less-than-25").hide();
                var myValue = $('#totalScore').val();
                if(myValue  <= 5){
                   $(".less-than-5").show()
                } 
                else if(myValue <= 10)
                {
                    $(".less-than-10").show()
                }
                else if(myValue >= 11)
                {
                    $(".less-than-25").show()
                }
            };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form action="" name="test" id="test">
        <select name="score1" id="score1" onchange="calculate()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>

        <select name="score2" id="score2" onchange="calculate()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>

        <input type="hidden" name="totalScore" id="totalScore">

        <div class="less-than-5" style="display:none;">low score</div>
        <div class="less-than-10" style="display:none;">med score</div>
        <div class="less-than-25" style="display:none;">high score</div>

        <button type="submit">Save</button>
    </form>