如何简化具有多个id的JS

Question

我正在尝试创建多个标签与id和can与类相同，我有以下代码，这是工作良好的预期，任何人可以帮助简化这一点

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

Answer 1

您可以创建一个函数，将父元素传递给它，然后使用$.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));
});

Answer 2

每个函数之间的所有变化都是主要的id选择器。因此，您可以在所有这些元素上使用一个公共类，并在jQuery选择器中使用该类从父元素遍历以查找相关的子元素，从而使您的JS逻辑枯竭。试试这个：

$('.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')逻辑，在父元素上使用CSS类，您可以打开和关闭父元素，但具体实现取决于您的HTML结构。