CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
thamizhinian
thamizhinian

Reputation: 83

how to simplify the JS with multiple id's

i am try to create multiple tabs with id and accordian for the same with class, i have the below code which is working fine as expected, can anyone help to simply this 

$("#tabs-1 .inmedia-card").slice(0, 6).css('display', 'flex');
var totalpost1 = $("#tabs-1 .inmedia-card").length;
if ($("#tabs-1 .inmedia-card").length > 6 ){
    $("#tabs-1 .btn-clk-loadmr").css('display', 'inline-block');
    $("#tabs-1 .btn-clk-loadmr").on('click', function (e) {
        e.preventDefault();
        $("#tabs-1 .inmedia-card:hidden").slice(0, 6).css('display', 'flex');
        visiblepost1=$("#tabs-1 .inmedia-card:visible").length;
        if ( visiblepost1 == totalpost1 ){   
            $("#tabs-1 .btn-clk-loadmr").css('display', 'none');
        }
    });
}

$("#tabs-2 .inmedia-card").slice(0, 6).css('display', 'flex');
var totalpost2 = $("#tabs-2 .inmedia-card").length;
if ($("#tabs-2 .inmedia-card").length > 6 ){
    $("#tabs-2 .btn-clk-loadmr").css('display', 'inline-block');
    $("#tabs-2 .btn-clk-loadmr").on('click', function (e) {
        e.preventDefault();
        $("#tabs-2 .inmedia-card:hidden").slice(0, 6).css('display', 'flex');
        visiblepost2=$("#tabs-2 .inmedia-card:visible").length;
        if ( visiblepost2 == totalpost2 ){   
            $("#tabs-2 .btn-clk-loadmr").css('display', 'none');
        }
    });
}

$(".tab-acrdion-body .inmedia-card").slice(0, 6).css('display', 'flex');
var totalpost = $(".tab-acrdion-body .inmedia-card").length;
if ($(".tab-acrdion-body .inmedia-card").length > 6 ){
    $(".tab-acrdion-body .btn-clk-loadmr").css('display', 'inline-block');
    $(".tab-acrdion-body .btn-clk-loadmr").on('click', function (e) {
        e.preventDefault();
        $(".tab-acrdion-body .inmedia-card:hidden").slice(0, 6).css('display', 'flex');
        visiblepost=$(".tab-acrdion-body .inmedia-card:visible").length;
        if ( visiblepost == totalpost ){   
            $(".tab-acrdion-body .btn-clk-loadmr").css('display', 'none');
        }
    });
}

Upvotes: 1

Views: 60

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

All that changes between each function is the primary id selector. As such you can DRY up your JS logic by using a common class on all those elements and using that within the jQuery selectors to traverse from the parent to find the related children. Try this:

$('.tab').each(function() { // add this class to all relevant elements
  let $tab = $(this);
  let $cards = $tab.find('.inmedia-card');
  let totalPost = $cards.length;
  $cards.slice(0, 6).css('display', 'flex');

  if ($cards.length > 6) {
    $tab.find('.btn-clk-loadmr').css('display', 'inline-block').on('click', function(e) {
      e.preventDefault();
      $tab.find('.inmedia-card:hidden').slice(0, 6).css('display', 'flex');
      let visiblepost = $tab.find('.inmedia-card:visible').length;
      if (visiblepost1 === totalpost1) {
        $tab.find('.btn-clk-loadmr').hide();
      }
    });
  }
});

I'd also strongly suggest changing the .slice(0, 6).css('display', 'X') logic to use a CSS class on the parent element which you toggle on and off instead, but the implementation of that depends on your HTML structure.

Upvotes: 2

Titus
Titus

Reputation: 22474

You can create a function, pass the parent element to it and use $.find(..) to select and modify all the different child elements, here is an example:

function process($parent) {
  $parent.find(".inmedia-card").slice(0, 6).css('display', 'flex');
  var totalpost1 = $parent.find(".inmedia-card").length;
  if ($parent.find(".inmedia-card").length > 6 ){
      $parent.find(".btn-clk-loadmr").css('display', 'inline-block');
      $parent.find(".btn-clk-loadmr").on('click', function (e) {
          e.preventDefault();
          $parent.find(".inmedia-card:hidden").slice(0, 6).css('display', 'flex');
          visiblepost1=$parent.find(".inmedia-card:visible").length;
          if ( visiblepost1 == totalpost1 ){   
              $parent.find(".btn-clk-loadmr").css('display', 'none');
          }
      });
  }
}
process($("#tabs-1"));
process($("#tabs-2"));
$(".tab-acrdion-body").each(function(){
  process($(this));
});

Upvotes: 2

Related Questions