Improve my Jquery code to hide and show elements

Question

I am new to Jquery and learning. I wrote some script, but I know its not efficient. Trying to follow DRY principles. Can someone please make this look nicer...it works fine, but i dont like it.

It works, just not efficient code.

<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

Since the conditional statement inside the jquery code is same. You can wrap it into single javascript function and call it whereever it is needed.

<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

The elements to show or hide are always the same, so you can put them all into a single variable and reference that variable.

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

You can look into.toggleClass .

It allows you to specify when to add/ remove 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

you can create a common 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>

also you can use toggle

 $("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>