Javascript 如何使用多个id简化JS

我正在尝试为同一个with类创建多个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');
        }
    });
}

---

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

---

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

---

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

$'.tab'.eachfunction{//将此类添加到所有相关元素 让$tab=$this； 让$cards=$tab.find'.inmedia card'； 让totalPost=$cards.length； $cards.slice0，6.css'display'，'flex'； 如果$cards.length>6{ $tab.find'.btn clk loadmr'.css'display'，'inline block'.on'click'，function e{ e、 防止违约； $tab.find'.inmedia卡：隐藏'.slice0，6.css'display'，'flex'； 让visiblepost=$tab.find'.inmedia卡：可见'.length； 如果visiblepost1===totalpost1{ $tab.find'.btn clk loadmr'.hide； } }; } };

---

我还强烈建议更改.slice0，6.css'display'，X'逻辑，以便在父元素上使用css类，而您可以在父元素上打开或关闭该类，但该类的实现取决于您的HTML结构。

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

$'.tab'.eachfunction{//将此类添加到所有相关元素 让$tab=$this； 让$cards=$tab.find'.inmedia card'； 让totalPost=$cards.length； $cards.slice0，6.css'display'，'flex'； 如果$cards.length>6{ $tab.find'.btn clk loadmr'.css'display'，'inline block'.on'click'，function e{ e、 防止违约； $tab.find'.inmedia卡：隐藏'.slice0，6.css'display'，'flex'； 让visiblepost=$tab.find'.inmedia卡：可见'.length； 如果visiblepost1===totalpost1{ $tab.find'.btn clk loadmr'.hide； } }; } };

---

我还强烈建议更改.slice0，6.css'display'，X'逻辑，以便在父元素上使用css类，而您可以在父元素上打开或关闭该类，但该类的实现取决于您的HTML结构。

这与预期一样正常，但不建议团队使用ES6，javascript版本。谢谢你的帮助是的，我理解，如果Put let也说这是es6，我也有同样的感觉，你是一个更好的团队，可以简单地改为varyep，我也这么做了，但他们不接受没有问题。我希望大家都能很好地处理这些问题：这正如预期的那样运行良好，但不建议团队使用ES6，javascript版本。谢谢你的帮助是的，我理解，如果Put let也说这是es6，我也有同样的感觉，你是一个更好的团队，可以简单地改为varyep，我也这么做了，但他们不接受没有问题。我祝你在处理这些问题时一切顺利：