如何为每个导航项添加toggle-link类触发隐藏DIV？（jQuery实现遇阻）

问题出在wheelnav是动态生成DOM元素的，你之前在页面加载完成后直接调用addClass时，那些导航项的<a>标签还没被创建出来，所以jQuery找不到目标元素，自然加不上类。

下面给你两种靠谱的解决办法：

方法1：在wheelnav创建完成后批量修改元素 #

等wheelnav生成完导航项，再遍历添加类和属性：

// 初始化wheelnav
var wheel = new wheelnav("your-wheel-container-id");
wheel.createWheel();

// 遍历所有导航项，给<a>标签加类和data属性
wheel.navItems.forEach(function(item, idx) {
  const $link = $(item.navItemElement).find("a");
  $link.addClass("toggle-link");
  $link.attr("data-div-id", `div${idx + 1}`); // 对应div1、div2...
});

方法2：自定义导航项模板（更高效） #

直接修改wheelnav的模板，让它生成的导航项一开始就符合你的要求，不用事后修改：

var wheel = new wheelnav("your-wheel-container-id");

// 自定义导航项的HTML模板
wheel.navItemTemplate = function(item) {
  const divId = `div${item.navItemIndex + 1}`;
  return `
    <div data-wheelnav-navitemtext="${item.navItemIndex}">
      <a href="#" class="toggle-link" data-div-id="${divId}">${item.navItemText}</a>
    </div>
  `;
};

// 创建导航轮
wheel.createWheel();

这样生成的每个导航链接都会自动带上toggle-link类和对应的data-div-id属性，完美匹配你要的格式。

内容的提问来源于stack exchange，提问作者Sudo SS