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

jQuery – better way of coding several repeating lines

Is there a better way of writing the code below, keep in mind there is no set minimum or maximum number and the format will remain the same: checkba0## and link-ba0## etc.

    if(data.config.checkba01 == false) { $(element).find(".link-ba01").toggleClass("hide"); }
    if(data.config.checkba02 == false) { $(element).find(".link-ba02").toggleClass("hide"); }
    if(data.config.checkba03 == false) { $(element).find(".link-ba03").toggleClass("hide"); }
    if(data.config.checkba04 == false) { $(element).find(".link-ba04").toggleClass("hide"); }
    if(data.config.checkba05 == false) { $(element).find(".link-ba05").toggleClass("hide"); }
    if(data.config.checkba06 == false) { $(element).find(".link-ba06").toggleClass("hide"); }
    if(data.config.checkba07 == false) { $(element).find(".link-ba07").toggleClass("hide"); }
    if(data.config.checkba08 == false) { $(element).find(".link-ba08").toggleClass("hide"); }
    if(data.config.checkba09 == false) { $(element).find(".link-ba09").toggleClass("hide"); }
    if(data.config.checkba010 == false) { $(element).find(".link-ba010").toggleClass("hide"); }
    if(data.config.checkba011 == false) { $(element).find(".link-ba011").toggleClass("hide"); }
    if(data.config.checkba012 == false) { $(element).find(".link-ba012").toggleClass("hide"); }

Thanks

Tags:

2

Answers


  1. 0

    The problem in your code is redundant logic. To fix this, you can use a loop to iterate over the items. This will reduce the redundant statements in the given implementation.

    Check following code:

    let i = 1;
let upperLimit = 12; // change it according to your requirements
while (i <= upperLimit) {
    const propertyName = `checkba0${i}`;
    const selector = `.link-ba0${i}`;

    if (data.config[propertyName] === false) {
        $(element).find(selector).toggleClass("hide");
    }

    i++;
}

    Above code will seperate the dynamic contents from the static code.

    Login or Signup to reply.
  2. 0

    You can do it like below:

    a) loop over data.config

    b) Check value is false

    c) If yes then use the key by replacing check with link- from it to toggle the class from the corresponding element.

    $.each( data.config, function(key, value) {
  if (value === false) {
    $(element).find("." + key.replace("check", "link-")).toggleClass("hide");
  }
});

    Working snippet:

    var data = {
  config: {
    checkba01: false,
    checkba02: true,
    checkba03: false,
    checkba04: false,
    checkba05: true
  }
};

var element = $('.find-me');
$.each( data.config, function(key, value) {
  if (value === false) {
    $(element).find("." + key.replace("check", "link-")).toggleClass("hide");
  }
});
    .hide {
  visibility: hidden;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="find-me">
  <p class="link-ba01">link-ba01</p>
  <p class="link-ba02">link-ba02</p>
  <p class="link-ba03">link-ba03</p>
  <p class="link-ba04">link-ba04</p>
  <p class="link-ba05">link-ba05</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search