Question

我在网站上修改了选项卡的脚本，并且可以正常工作，直到选项卡少于9个为止。

当我添加10个以上时，它停止工作了，如何修改它？不仅可以与＃sppb-tab1-1或＃sppb-tab1-9等标签一起使用，而且还可以与＃sppb-tab1-12

jQuery(function() {
  const parent = "sppb-addon-1539203446310";
  const links = jQuery("#" + parent + " .custom-tab li a");
  let counter = 1;

  for (let x = 0; x < links.length; x++) {
    let newID = jQuery(".custom-tab li a").eq(x).attr('id').slice(0, -1) + counter;
    let newLink = jQuery(".custom-tab li a").eq(x).attr('href').slice(0, -1) + counter;
    if (jQuery(".custom-tab li a").eq(x).attr('href').slice(0, -1) == "#sppb-tab1-1") {
      newLink = jQuery(".custom-tab li a").eq(x).attr('href').slice(0, -2) + counter;
    }
    jQuery(".custom-tab li a").eq(x).attr('href', newLink);
    jQuery(".custom-tab li a").eq(x).attr('id', newID);
    jQuery(".custom-tab li a").eq(x).attr('aria-controls', newLink);
    counter++;
  }

  // Tabs to switch it off
  jQuery(".sppb-tab-1539203446310").click(function() {
    return false
  })

  jQuery(".sppb-tab-1539203446313").click(function() {
    return false
  })
})

Answer 1

只需在所有each()元素中使用.custom-tab li a循环。然后，有多少都没关系。像这样：

jQuery(function($) {
  const parent = "sppb-addon-1539203446310";
  const links = $("#" + parent + " .custom-tab li a");

  $('.custom-tab li a').each(function(i) {
    let newID = this.id.slice(0, -1) + (i + 1);
    let newLink = this.href.slice(0, -1) + (i + 1);
    if (this.href.slice(0, -1) == "#sppb-tab1-1")
      newLink = this.href.slice(0, -2) + (i + 1);

    $(this).attr({
      href: newLink,
      id: newID,
      'aria-controls': newLink
    });
  });

  // Tabs to switch it off
  $(".sppb-tab-1539203446310, .sppb-tab-1539203446313").click(function() {
    return false
  })
});

关于此的一些注意事项。首先，出于性能原因，创建一个jQuery对象的单个实例并重新使用它是一个好习惯，尽管在这种情况下，您只需要一个实例，因为您可以通过向{{1}提供一个对象来一次更新多个属性}。

第二，我建议不要使用增量attr()属性，因为它通常是一种反模式。在所有元素上使用单个通用类以及DOM遍历在需要时将它们彼此关联通常是一个更好的解决方案。

如何更改脚本以使用超过9个选项卡

1 个答案: