javascript - 为 classList.toggle 设置条件

Question

我有一个由 onClick 触发的函数。这是 example .我只想在未触发“slide2”时才能触发函数“slide1”。我尝试设置这样的条件语句:

function slide1() {
    btn1.classList.toggle('slide', btn2.className != 'slide');
}

我也试过这样的 if 语句:

function slide1() {
    if(btn2.className != 'slide') {
    btn1.classList.toggle('slide');
    }
}

那也没用。

如果满足某些条件，我只需要一种简单的方法来切换类；没有 jQuery 或库。谢谢。

var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');

function slide1() {
  btn1.classList.toggle('slide');
}

function slide2() {
  btn2.classList.toggle('slide');
}

* {
  margin: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}

div {
  width: 50%;
  height: 100vh;
  display: block;
  position: absolute;
  text-align: center;
  cursor: pointer;
}

#btn1 {
  background: blue;
}

#btn2 {
  background: red;
  left: 50%;
}

#btn1.slide {
  width: 80%;
  z-index: 999;
}

#btn2.slide {
  width: 80%;
  z-index: 999;
  left: 20%;
}

<div id="btn1" onClick="slide1();">
  left
</div>
<div id="btn2" onClick="slide2();">
  right
</div>

更新: Here是我正在处理的问题的扩展示例。有几个元素的类只需要在特定情况下切换。如果在触发“panel2”时触发“panel1”，则“panel1”将覆盖“panel2”。与“panel3”相同。

Answer 1

为了回答您的问题，在 JavaScript 中检查元素是否具有类的正确方法是 element.classList.contains .

因此，在您的示例中，您应该将条件替换为

if(btn2.className.contains('slide')) {
  ...
}

---

作为旁注，应尽可能避免让不同的函数在不同的元素上做完全相同的事情。您不应拥有两个函数，而应该只有一个函数并使用点击事件的目标:

let halves = document.querySelectorAll("div");

function slide(event) {
  // remove `slide` class from both divs:
  [].map.call(halves, function(half){
    half.classList.remove('slide');
  });
  // add `slide` class to currently clicked div:
  event.target.classList.add('slide')
}

* {
  margin: 0;
  transition: 1s ease;
  -webkit-transition: 1s ease;
}

div {
  width: 50%;
  height: 100vh;
  display: block;
  position: absolute;
  text-align: center;
  cursor: pointer;
}

#btn1 {
  background: blue;
}

#btn2 {
  background: red;
  left: 50%;
}

#btn1.slide {
  width: 80%;
  z-index: 999;
}

#btn2.slide {
  width: 80%;
  z-index: 999;
  left: 20%;
}

<div id="btn1" onClick="slide(event);">
  left
</div>
<div id="btn2" onClick="slide(event);">
  right
</div>

另一方面，我假设您知道您的问题和我的答案中使用的选择器非常通用，永远不应在生产就绪代码中使用。

---

最后一点，你的 CSS 有很多问题，但我不考虑在这里修复它，因为它对除了你自己以外的任何人都没有帮助，这违背了 SO 的第一个原则:一个答案应该帮助多个用户拥有一样的问题。以下是我对您的示例进行编码的方式:

let br = document.querySelector('#blueRed');
br.addEventListener('click', function(event) {
  event.target.classList.toggle('slide');
  [].map.call(br.querySelectorAll('div'), function(div) {
    if (div !== event.target) {
      div.classList.remove('slide');
    }
  });
})

body {
  margin: 0;
}

#blueRed {
  height: 100vh;
  display: flex;
}

#blueRed div {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1);
  flex-grow: 1;
  background-color: blue;
  color: white;
  cursor: pointer;
}

#blueRed div:last-child {
  background-color: red;
}

#blueRed div.slide {
  flex-grow: 3;
}

<div id="blueRed">
  <div>left</div>
  <div>right</div>
</div>

fiddle here .应该是prefixed .