Btukfyl

I'm having a really hard time understanding how to best utilize if else statements. For example:

$('.qty_input').keyup(function () {

var qtyValue = $('.qty_input').val();

    if (qtyValue >= number1 && qtyValue <= number10){

        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}

        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}

       }

       else if (qtyValue >= number2 && qtyValue <= number20){

        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}

       }

       else if (qtyValue >= number3 && qtyValue <= number30){

        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}

        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {}else {$('option[value="4"]').wrap('<span/>')}

       }

       else if (qtyValue >= number4 && qtyValue <= 999999){

        if ($('option[value="2"]').parent("span").length) {$('option[value="2"]').unwrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {$('option[value="3"]').unwrap('<span/>')}

        if ($('option[value="4"]').parent("span").length) {$('option[value="4"]').unwrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {$('option[value="1"]').unwrap('<span/>')}

        if ($('option[value="2"]').parent("span").length) {}else {$('option[value="2"]').wrap('<span/>')}

        if ($('option[value="3"]').parent("span").length) {}else {$('option[value="3"]').wrap('<span/>')}

        if ($('option[value="1"]').parent("span").length) {}else {$('option[value="1"]').wrap('<span/>')}

       }});

Does anybody have any suggestions on how I can update this so it's cleaner and more effective? Thanks.

Looking at your code, I noticed some patterns that can be converted into functions, or taken away at once.

$('.qty_input').keyup(function () {



    var qtyValue = $('.qty_input').val();

    // these 4 statements are executed no matter what. 

    // there is no point in duplicating them in each if-then block

    for(var i=1; i<=4; i++) {

        if ($('option[value="'+i+'"]').parent("span").length) {

           $('option[value="'+i+'"]').unwrap('<span/>');

        }

    }





         // the pattern for the next part is simple

         // execute 4 statements of jQuery but exclude one part per each if-then block

         if (qtyValue >= number1 && qtyValue <= number10) { exclude(1); }

    else if (qtyValue >= number2 && qtyValue <= number20) { exclude(2); }     

    else if (qtyValue >= number3 && qtyValue <= number30) { exclude(3); }        

    else if (qtyValue >= number4 && qtyValue <= 999999)   { exclude(4); }        



    function exclude(num) {

        // loop from 1 to 4 to execute the same for each part

        // but only exclude the one statement that is passed 

        // into the function

        for(var i=1; i<=4; i++) {

            if(i!=num) {

                if (!$('option[value="'+i+'"]').parent("span").length) {

                     $('option[value="'+i+'"]').wrap('<span/>')

                }

            }

        }

    }

});

One option would be to create an object of the jQuery collections (for each value=). Because the unwrapping process is the same for every outer qtyValue condition, you can run that part of the code unconditionally, by iterating over the object's values and unwrapping if the item's parent is a span. Then, make a function that takes as a parameter the value you want to ignore when wrapping, and iterate over the values of the object that don't have that value.

It would also be nice if you could change your standalone number# variables into an array of ranges, for example

[

  [10, 20], // [number1, number10]

  [21, 30], // [number2, number20]

That'll not only be better for making your code concise when defining those ranges, but it'll also make it easier to .find the appropriate index to call wrap with - replace the four if / else if statements at the end with something like:

const indexToIgnore = 1 + ranges.findIndex(([min, max]) => qtyValue >= min && qtyValue <= max);

wrap(indexToIgnore);

In full:

$('.qty_input').keyup(function () {

  const qtyValue = $('.qty_input').val();

  const options = {

    1: $('option[value="1"]'),

    2: $('option[value="2"]'),

    3: $('option[value="3"]'),

    4: $('option[value="4"]'),

  };

  // unwrap all, code is the same regardless of `if` statement::

  Object.values(options).forEach((option) => {

    if (option.parent("span").length) {

      option.unwrap('<span/>')

    }

  });

  function wrap(keyToIgnore) {

    keyToIgnore = String(keyToIgnore); // object properties are strings

    Object.entries(options)

      .filter(([key]) => key !== keyToIgnore)

      .forEach(([, option]) => {

        if (!option.parent("span").length) {

          option.wrap('<span/>')

        }

      });

  }

  const indexToIgnore = 1 + ranges.findIndex(([min, max]) => qtyValue >= min && qtyValue <= max);

  wrap(indexToIgnore);

});