Question

只是想了解JavaScript的原理，我对此有点新鲜。

我在某些元素中添加了一些样式，这些元素是我滚动浏览的幻灯片。

＆＃34;当前＆＃34; div已应用transform: none，其他两个已根据我在滑块上的位置进行样式设置。

我使用的代码运行正常。

el.style.transform = i === e.current ? 'none' : i > e.current ? 'translateX(100%)' : 'translateX(-100%)'

我的问题是如何将class添加/切换到当前el，并在它不再是当前时将其删除。

我尝试过使用相同原则的一些选项，但无法找到实现目标的正确方法。

el.classList = i === e.current.toggle('classname') : i > ? e.current.toggle('classname')

el.classList.toggle() = i === e.current ? 'active' : i > e.current ? 'prev' : 'next'

有人可以告诉我如何实现我想做的事情吗？我已经尝试通过Stack Overflow上的其他一些帖子来查看我能找到它的element.classList文档，但我仍然坚持这一点，JS知识不是我的强项。

谢谢！

Answer 1

切换采用类名称，例如el.classList.toggle('classname')。您不会将变量传递给像el.classList.toggle() = 'classname'这样的函数。但是你可能最好不要再调用add或remove，这取决于项目是否是当前项目，因为你还需要确保其他类不在那里。

el.classList[i === e.current ? 'add' : 'remove']('active');

然而，既然你也希望prev和next最好不要尝试使用三元组太聪明并使其可读：

if (i > e.current) {
  el.classList.remove('current', 'prev');
  el.classList.add('next');
} else if (i < e.current) {
  el.classList.remove('current', 'next');
  el.classList.add('prev');
} else {
  el.classList.remove('prev', 'next');
  el.classList.add('current');
}

如果你不担心覆盖其他类，你可以使用className来简化它，因为它会覆盖任何现有的类：

if (i > e.current) {
  el.className = 'next';
} else if (i < e.current) {
  el.className = 'prev';
} else {
  el.className = 'current';
}

当前元素的JavaScript切换类

1 个答案: