向元素添加和删除类不起作用[重复]答案

【问题标题】：add and removing class to an element isn't working [duplicate]向元素添加和删除类不起作用[重复]
【发布时间】：2022-01-26 21:57:44
【问题描述】：

我很感激这方面的帮助。我有两个问题。 这是第一个问题：

由于某种原因，当我想在添加另一个元素之前从一个元素中清除一个类时，我无法让 classlist.remove 工作。我正在尝试制作幻灯片功能，每当用户单击箭头时，都会应用一个类，这会使元素看起来是滑动的（从左到右，具体取决于单击的按钮）。

我正在尝试首先删除其他类（slidein/slideinleft），以便我可以添加它们并重新应用该功能。任何想法为什么它似乎不起作用？ （注意，它只在你第一次按下按钮时起作用，我希望它每次都起作用）

Here's a link to the fiddle

这里是代码：

function addclass(i, c) {
 document.getElementById(i).classList.remove("slidein", "slideinleft");
 
 document.getElementById(i).classList.add(c);

}

/* Slideshow container */
.slideshow-container {
  margin: 0;
  max-width: 80%;
  overflow: hidden;
}

.slides {
  position:relative;
  width:80%;
  margin: 0;
  background:red;
}

/* Next & previous buttons */
.prev, .next {
  font-family: Verdana;
  opacity: 0.4;
  cursor: pointer;
  position: absolute;
  top: 0%;
  font-size: 28px;
  transition: 0.6s ease;
  user-select: none;
  font-weight: bold;
  padding-left: 2%;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/* Position the "next button" to the right */
.next {
  left: 90%;
}
.prev {
  right: 90%;
}

.prev, .next:hover {
 opacity: 1;
 -webkit-filter: none; /* Safari 6.0 - 9.0 */
 filter: none;
}

.slidein {
  animation-name: slidein;
  animation-duration: 1.5s;
}

@keyframes slidein {
  from {left: 100%}
  to {left: 0}
}

.slideinleft {
  animation-name: slideinl;
  animation-duration: 1.5s;
}

@keyframes slideinl {
  from {right: 100%}
  to {right: 0}
}

<center><div class='slideshow-container'>
   <table id='curt1' class='slides'>
   <tr>
   <td>#1</td>
   </tr>
   </table>
   </div>
   </center>
      <div class='next' onclick='addclass("curt1", "slidein")'>&#10095;</div>
      <div class='prev' onclick='addclass("curt1", "slideinleft")'>&#10094;</div>

我的第二个问题，如果我想在不使用 id:s 的情况下实现相同的目标怎么办。我已经在上面的示例中隔离了相关代码。但实际上我在具有相同类的几个元素之间滑动，并且没有指定任何 id。是否有可能或者我需要编辑我的代码以便给每个元素一个 id？

非常感谢您的专业指导！

在被提及this thread 后，我使用解决方案#4 解决了这个问题。我把函数改成这样：

function addclass(i, c) {

    document.getElementById(i).classList.remove(c);
    document.getElementById(i).classList.remove("slidein");
    document.getElementById(i).classList.remove("slideinleft");
    void document.getElementById(i).offsetWidth; 
    
    document.getElementById(i).classList.add(c);
    
   }

【问题讨论】：

至于第二个问题（一开始不应该与其他问题混为一谈 - 请在未来为每个单独的问题创建一个问题帖) - 学习根据元素之间的关系导航 DOM。您可以将this 作为参数传递给您的处理函数，以获取对发生事件的当前元素的引用 - 然后您可以从那里向上移动，直到找到一个特定类型的父节点，或者具有特定的父节点类，例如。
感谢 CBroe，我会记得将每个问题分开，以备将来发布。您对另一个线程的引用解决了我的问题。我在这个线程中使用了解决方案#4：stackoverflow.com/questions/22093141/…。我还在我的原始帖子中添加了解决方案。

标签： javascript css class animation

【解决方案1】：

第一个问题我不明白你的问题，每次点击都会删除并添加类

第二个问题你可以使用https://swiperjs.com/swiper-api这是一个js插件

【讨论】：

如果问题不清楚，最好在发布答案之前发表评论。