如何简化具有多个 id 的 JS

Posted 2023-05-09

【中文标题】如何简化具有多个 id 的 JS

【英文标题】：how to simplify the JS with multiple id's

【发布时间】：2020-07-14 05:23:58

【问题描述】：

我正在尝试创建多个带有 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');
        
    );

【参考方案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));
);

【参考方案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 结构。

【讨论】：

这按预期工作正常，但不建议团队使用 ES6，javascript 版本。感谢您的帮助

是的，我明白，如果让他们也说它是 es6，我也和你一样感觉更好的团队

可以直接改成var

是的，我也这样做了，但他们不接受

没问题。祝你一切顺利：）