как упростить JS с несколькими идентификаторами - PullRequest
Новая
       23

как упростить JS с несколькими идентификаторами

1 голос
/ 02 апреля 2020

Я пытаюсь создать несколько вкладок с идентификатором и аккордеоном для одного и того же с классом, у меня есть приведенный ниже код, который работает нормально, как и ожидалось, может кто-нибудь помочь просто это 

$("#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');
        }
    });
}

Ответы [ 2 ]

2 голосов
/ 02 апреля 2020

Все, что изменяется между каждой функцией, является основным id селектором. Таким образом, вы можете DRY повысить свою JS логи c, используя общий класс для всех этих элементов и используя его в селекторах jQuery для обхода от родителя, чтобы найти связанных потомков. Попробуйте это: 

$('.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();
      }
    });
  }
});

Я также настоятельно рекомендую изменить .slice(0, 6).css('display', 'X') logi c, чтобы использовать класс CSS в родительском элементе, который вы включаете и выключаете вместо этого, но реализация это зависит от вашей HTML структуры.

2 голосов
/ 02 апреля 2020

Вы можете создать функцию, передать ей родительский элемент и использовать $.find(..), чтобы выбрать и изменить все различные дочерние элементы, вот пример: 

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));
});
...