当另一个“onclick”功能处于活动状态时，取消调用/反转“onclick”功能答案

【问题标题】：Uncall/reversing an 'onclick' function when another 'onclick' function is active当另一个“onclick”功能处于活动状态时，取消调用/反转“onclick”功能
【发布时间】：2021-01-11 12:34:44
【问题描述】：

我有一个问题，当我单击具有“onclick”功能的元素时，它可以正常工作，但是当我单击具有不同“onclick”功能的另一个元素时，第一个“onclick”功能将保留。相反，我希望能够反转（？）第一个函数，使其不再处于活动状态。这些是 h1 标签，用作导航，当我点击其中一个标签时，它们会改变它们的样式。

这是我的代码：

function aboutActive() {
    var about = document.querySelector('.about');

    about.classList.toggle('about-active');
}

function contactActive() {
    var contact = document.querySelector('.contact');

    contact.classList.toggle('contact-active');
}

function discoverActive() {
    var discover = document.querySelector('.discover');

    discover.classList.toggle('discover-active');
}

function signUpActive() {
    var signUp = document.querySelector('.sign-up');

    signUp.classList.toggle('signUp-active');
}

 .about {
     position: absolute;
     left: 70.8%;
     top: 5%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .contact {
     position: absolute;
     left: 56%;
     top: 24%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .discover {
     position: absolute;
     left: 52.7%;
     top: 43%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
 .sign-up {
     width: 100%;
     position: absolute;
     left: 62.6%;
     top: 63%;
     transition: transform 0.8s ease-in;
     transition: 0.8s ease-in;
}
/* New styles applied by JS */
 .about-active {
     transform: translateX(-30%);
     color: #ffffff;
}
 .contact-active {
     transform: translateX(-22%);
     color: #ffffff;
}
 .discover-active {
     transform: translateX(-24%);
     color: #ffffff;
}
 .signUp-active {
     transform: translateX(-14.2%);
     color: #ffffff;
}

<h1 class="about" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="aboutActive()">ABOUT</h1>
<h1 class="contact" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="contactActive()">CONTACT</h1>
<h1 class="discover" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="discoverActive()">DISCOVER</h1>
<h1 class="sign-up" onmouseover=cursorEnlargeLarge() onmouseout=cursorNormal() onclick="signUpActive()">SIGN UP</h1>

这些是在单击时切换样式的功能。

重申一下，当我单击其中一个 h1 元素时，它会正常执行其“onclick”功能，但如果我想单击第二个 h1 元素，第二个元素的功能将激活，但第一个元素将保留。我将如何更改它以便反转/取消调用之前的任何函数？

【问题讨论】：

这能回答你的问题吗？ Simple throttle in js
@KrzysztofKrzeszewski 我认为这个答案是基于时间的，而我只想在单击并激活另一个功能时反转/取消调用该功能，而不考虑时间。如果我误读/误解了您给我的答案，我们深表歉意。
反之，函数最初做了什么？函数aboutActive 将about-active 类添加到具有.about 类的元素中——现在该操作的反面是什么，嗯？
当然这会变得更加紧凑，一旦你停止为每种情况编写单独的函数 - 并改用 one 函数，它会获取传递的参数和/或使用this 确定点击发生在哪个元素上。
@CBroe Smh... 答案总是那么简单，不是吗。它现在完全正常工作。感谢您的帮助。

标签： javascript html css

【解决方案1】：

function undo(ele){
    let cl = ele.classList;
    ele.classList.remove(cl[cl.length - 1], cl[cl.length - 2]);
}

function aboutActive() {
    let about = document.querySelector('.about');
    let current = document.querySelector(".current");
    if(current) undo(current);
    about.classList.toggle('about-active');
    about.classList.add("current");
}

function contactActive() {
    let contact = document.querySelector('.contact');
    let current = document.querySelector(".current");
    if(current) undo(current);
    contact.classList.toggle('contact-active');
    contact.classList.add("current");
}

我只是将“当前”类添加到活动元素。

如果“当前”已存在，则删除“当前”元素的最后 2 个类。

这不是最好的，但它确实有效。

（这是我在stackoverflow上的第一个答案，所以请不要讨厌我）

【讨论】：

【解决方案2】：

据我了解，您希望在单击之前单击的其他功能时取消调用功能

 var about = document.querySelector('.about');
 var contact = document.querySelector('.contact');

function aboutActive() {
    about.classList.toggle('about-active', true);
}

function contactActive() {
   
about.classList.toggle('about-active', false);
contact.classList.toggle('contact-active');

}

【讨论】：

【解决方案3】：

在点击任何H1之前添加重置功能，这将重置所有h1标签点击

function aboutActive() {
  resetAll();
  var about = document.querySelector('.about');

  about.classList.toggle('about-active');
}

function contactActive() {
  resetAll();
  var contact = document.querySelector('.contact');

  contact.classList.toggle('contact-active');
}

function discoverActive() {
  resetAll();
  var discover = document.querySelector('.discover');

  discover.classList.toggle('discover-active');
}

function signUpActive() {
  resetAll();
  var signUp = document.querySelector('.sign-up');

  signUp.classList.toggle('signUp-active');
}

function resetAll() {
  var getheading = document.getElementsByTagName("H1");
  [].forEach.call(getheading, function(el) {
    var classes = el.className.split(" ").filter(c => !c.endsWith("-active"));
    el.className = classes.join(" ").trim();

  })
}

.about-active {
  transform: translateX(-30%);
  color: #ffffff;
}

.contact-active {
  transform: translateX(-22%);
  color: #ffffff;
}

.discover-active {
  transform: translateX(-24%);
  color: #ffffff;
}

.signUp-active {
  transform: translateX(-14.2%);
  color: #ffffff;
}

<h1 class="about" onclick="aboutActive()">ABOUT</h1>
<h1 class="contact" onclick="contactActive()">CONTACT</h1>
<h1 class="discover" onclick="discoverActive()">DISCOVER</h1>
<h1 class="sign-up" onclick="signUpActive()">SIGN UP</h1>

【讨论】：

请问resetAll() 函数实际上是做什么的可以吗？当您单击 H1 然后添加活动类时，它是否只是删除/删除活动类？
是的，它会在所有 H1 中搜索活动类（如果存在），它会在单击元素上添加活动类之前将其删除
我遇到了一个问题，如果您选择 h1 之一，即使是 .toggle，您也无法再次选择它来删除活动类

【解决方案4】：

所以我最终做的只是在调用函数时删除活动类：

function aboutActive() {
var about = document.querySelector('.about');
var contact = document.querySelector('.contact');
var discover = document.querySelector('.discover');
var signUp = document.querySelector('.sign-up');

about.classList.toggle('about-active');
contact.classList.remove('contact-active');
discover.classList.remove('discover-active');
signUp.classList.remove('signUp-active');

}

我必须对每个 h1 元素都这样做，所以这不是最好的方法，但它确实有效。

【讨论】：

@Master.Deep 的代码比这个答案高效得多