Tabit.js 同一个页面上的多个实例与类名

Question

使用名为 tabit.js 的选项卡库。它可以使用 ID 和一个选项卡进行初始化，但我现在在一页上有多个选项卡，并且发现如果不为这两个选项卡都设置一个 ID 很难动态地完成这项工作。想过对每个做如下：

$('.tabs').each(function () {
  const element = $(this)
  const options = {
    buttonSelector: '[data-target]',
    buttonActiveClass: 'is-active',
    contentSelector: '[data-content]',
    buttonAttribute: 'data-target',
    contentAttribute: 'data-content',
    contentActiveClass: 'is-active',
  }
  if (element) {
    /* eslint-disable no-new */
    new Tabit(element, options)
  }
})

但 Tabit 暗示它没有通过输出找到元素初始化：

Uncaught TypeError: new Tabit requires a DOM element as its first argument.

在此处查看 JSFiddle：https://jsfiddle.net/e8y0d5um/7/

关于如何使这项工作有任何想法吗？发现很难在同一页面上找到没有唯一 ID 的多个选项卡的任何解决方案。

Answer 1

each 方法中的

this 指的是 DOM 元素。不需要用$()包起来。试试这个

$('.tabs').each(function () {
  const element = this
  const options = {
    buttonSelector: '[data-target]',
    buttonActiveClass: 'is-active',
    contentSelector: '[data-content]',
    buttonAttribute: 'data-target',
    contentAttribute: 'data-content',
    contentActiveClass: 'is-active',
  }
  if (element) {
    /* eslint-disable no-new */
    new Tabit(element, options)
  }
})

Tabit.js 同一个页面上的多个实例与类名

Tabit.js multiple instances on same page with className

javascript

jquery

tabs