优化我的JQuery元素显示隐藏代码（遵循DRY原则）

你的代码核心问题是重复了两次相同的显示/隐藏逻辑，我们可以通过提取复用函数和合并元素选择器来遵循DRY原则，优化后的代码如下：

<script>
$(document).ready(function () {
    // 提取复用的显示/隐藏逻辑为函数
    function toggleFields() {
        var val = $('#id_ocftype').val();
        // 合并选择器，一次性操作所有目标元素
        $('#div_id_date, #div_id_amount, #div_id_signedby').toggle(val > 3);
    }

    // 页面加载时执行一次初始化
    toggleFields();

    // 绑定change事件，调用复用函数
    $('#id_ocftype').change(toggleFields);
});
</script>

优化点说明： #

• 提取复用函数：把重复的判断和操作逻辑封装成toggleFields函数，页面初始化和change事件都调用它，彻底消除代码冗余。
• 合并元素选择器：用逗号分隔多个选择器，一次性选中所有需要操作的元素，减少DOM查询次数，提升执行效率。
• 使用toggle方法：jQuery的toggle()方法可以根据传入的布尔值自动切换元素的显示/隐藏状态，替代了原代码中冗余的if-else分支，让逻辑更简洁直观。

内容的提问来源于stack exchange，提问作者Dr. Ijaz Chaudhry