Question 35665 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Improve my Jquery code to hide and show elements

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

4

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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);
});
    Login or Signup to reply.
  3. 0

    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()
});
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search