如何简化具有多个 id 的 JS

Question

我正在尝试创建多个带有 id 和accordian 的选项卡，与类相同，我有下面的代码，它按预期工作，任何人都可以帮助简单地完成这个

$("#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 结构。