改进我的 Jquery 代码来隐藏和显示元素

Question

我是 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>

Answer 1

由于 jquery 代码中的条件语句是相同的。 您可以将其包装成单个 javascript function 并在需要的地方调用它。

<script>
    $(document).ready(function () {
            const showAndHide = (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();
                };
            }
            var val = $('#id_ocftype').val();
            showAndHide(val);
            $('#id_ocftype').change(function () {
                var val = $(this).val();
                showAndHide(val);
            });
    });
   

</script>

Answer 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);
});

Answer 3

您可以查看.toggleClass 。

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

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);
  handleVisibility()
});

Answer 4

你可以创建一个通用的 function

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