改进我的 Jquery 代码以隐藏和显示元素答案

【问题标题】：Improve my Jquery code to hide and show elements改进我的 Jquery 代码以隐藏和显示元素
【发布时间】：2023-01-03 13:31:20
【问题描述】：

我是 Jquery 和学习的新手。我写了一些脚本，但我知道它效率不高。尝试遵循 DRY 原则。有人可以让这个看起来更好吗...它工作正常，但我不喜欢它。

它有效，只是不是高效的代码。

<script>
    $(document).ready(function () {
            var val = $('#id_ocftype').val();
            if (val <= 3) {
                $('#div_id_date').hide();
                $('#div_id_amount').hide();
                $('#div_id_signedby').hide();
            }
            else {
                $('#div_id_date').show();
                $('#div_id_amount').show();
                $('#div_id_signedby').show();
            };

            $('#id_ocftype').change(function () {
                var val = $(this).val();
                if (val <= 3) {
                    $('#div_id_date').hide();
                    $('#div_id_amount').hide();
                    $('#div_id_signedby').hide();
                }
                else {
                    $('#div_id_date').show();
                    $('#div_id_amount').show();
                    $('#div_id_signedby').show();
                };
            });
    });
</script>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以创建一个通用函数

<script>
    $(document).ready(function () {
            var val = $('#id_ocftype').val();
            const hideEl = () => {
                $('#div_id_date').hide();
                $('#div_id_amount').hide();
                $('#div_id_signedby').hide();
            }
            const showEl = () => {
                $('#div_id_date').show();
                $('#div_id_amount').show();
                $('#div_id_signedby').show();
            }
            if (val <= 3) {
                hideEl();
            }
            else {
                showEl();
            };

            $('#id_ocftype').change(function () {
                var val = $(this).val();
                if (val <= 3) {
                    hideEl();
                }
                else {
                    showEl();
                };
            });
    });
</script>

你也可以使用切换

$("button").click(() => {
  $("#test").toggle();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">test</div>
<button>Hide/Show</button>

【讨论】：

【解决方案2】：

要显示或隐藏的元素始终相同，因此您可以将它们全部放入一个变量中并引用该变量。

$(document).ready(function () {
    const elms = $('#div_id_date, #div_id_amount, #div_id_signedby');
    const onChange = () => {
        const val = $('#id_ocftype').val();
        if (val <= 3) {
            elms.hide();
        } else {
            elms.show();
        };
    };
    onChange();
    $('#id_ocftype').change(onChange);
});

【讨论】：

【解决方案3】：

你可以看看.toggleClass。

它允许您指定何时添加/删除类。

function handleVisibility() {
  var val = $('#id_ocftype').val();
  const hide = val <= 3
  $('#div_id_date').toggleClass('hide', hide)
  $('#div_id_amount').toggleClass('hide', hide)
  $('#div_id_signedby').toggleClass('hide', hide)
}
$(document).ready(function() {
  $('#id_ocftype').change(handleVivibility);
});

【讨论】：

【解决方案4】：

由于 jquery 代码中的条件语句是相同的。您可以将其包装到单个 javascript 函数中，并在需要时调用它。

<script>
    $(document).ready(function () {
            const showAndHide = () => {
                if (val <= 3) {
                    $('#div_id_date').hide();
                    $('#div_id_amount').hide();
                    $('#div_id_signedby').hide();
                }
                else {
                    $('#div_id_date').show();
                    $('#div_id_amount').show();
                    $('#div_id_signedby').show();
                };
            }
            var val = $('#id_ocftype').val();
            showAndHide();
            $('#id_ocftype').change(function () {
                var val = $(this).val();
                showAndHide();
            });
    });
   

</script>

【讨论】：