如何用jQuery通过HTML下拉选择框切换利息元素的显示隐藏

问题说明 #

作为jQuery初学者，开发利息计算器时遇到以下需求无法实现：

• 选择下拉框的「Month」选项时，显示Minter元素并隐藏inter元素
• 选择「Year」选项时，显示inter元素并隐藏Minter元素

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    function thousands_separe(num) {
        let number = num.toString().split(".");
        number[0] = number[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return number.join(".");
    }

    $(function() {
        // 初始化显示隐藏状态，匹配默认选中的下拉框选项
        toggleInterestDisplay($('#duration').val());

        // 绑定输入框和下拉框的事件，实时计算并更新显示
        $("#invest, #ratereturn, #term, #duration").on("keyup change", function(){ 
            let invest = $('#invest').val();
            let ratereturn = $('#ratereturn').val();
            let term = $('#term').val();
            let duration = $('#duration').val();
            
            let interest = Math.pow((1 + ratereturn/100), term); 
            let minterest = Math.pow((1 + ratereturn/100/12), term); 

            // 根据选择的时长类型计算对应总金额
            let total = duration === "Year" ? invest * interest : invest * minterest;
            let decitotal1 = total.toFixed(); 
            let intotal = thousands_separe(decitotal1);
   
            $('#total').html(intotal);
            $('#inter').html(interest);
            $('#Minter').html(minterest);

            // 更新利息元素的显示状态
            toggleInterestDisplay(duration);
        });

        // 封装显示/隐藏逻辑，简化代码
        function toggleInterestDisplay(duration) {
            if (duration === "Month") {
                $('#inter').closest('p').hide();
                $('#Minter').closest('p').show();
            } else {
                $('#inter').closest('p').show();
                $('#Minter').closest('p').hide();
            }
        }
    }); 
</script>

<p>Beginning Investment</p> 
<input type="text" id="invest" name="invest" width="200" value="1000"></br>

<p>Rate of Return</p> 
<input type="text" id="ratereturn" name="ratereturn" width="200" value="10"></br>

<p>Term Length</p> 
<input type="text" id="term" name="term" width="200" value="10"></br>

<p>duration</p> 
<select id="duration"> 
    <option selected> Year</option>
    <option> Month</option>  
</select>

<p>Total: $<span id="total"></span></p>

<p>Year Interest: $<span id="inter"></span></p>

<p>Month Interest: $<span id="Minter"></span></p>

关键修改点 #

1. 修复原代码中重复id的问题（HTML中id属性必须唯一，原代码里ratereturn、term、duration都重复定义了id）
2. 新增toggleInterestDisplay函数封装显示/隐藏逻辑，避免重复代码
3. 给下拉框添加change事件监听，同时将其加入实时计算的事件绑定组，确保切换选项时同步更新计算结果和显示状态
4. 页面初始化时调用一次显示/隐藏函数，保证初始状态与默认选中的下拉框选项匹配
5. 修正总金额计算逻辑：根据选择的时长类型（Year/Month）使用对应的利息公式，原代码无论选什么都用年利息计算，属于逻辑错误

内容的提问来源于stack exchange，提问作者Rashed khan