设置classList.toggle

Question

我有一个由onClick触发的功能。这是example。我想只能触发功能＆＃39; slide1＆＃39;当＆＃39; slide2＆＃39;没有触发。我尝试设置这样的条件语句：

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

我也尝试过这样的if语句：

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

那也没有用。

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

＆＃13;

＆＃13;

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

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

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

＆＃13;

* {
  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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新： Here是我正在处理的问题的扩展示例。有几个元素只需要在特定情况下切换类。如果＆＃39; panel1＆＃39;在＆＃39; panel2＆＃39;已被触发，然后是＆＃39; panel1＆＃39;将涵盖面板2＆＃39;。与＆＃39; panel3＆＃39;相同。

Answer 1

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

因此，在您的示例中，您应该用

替换条件

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

作为旁注，应尽可能避免在不同元素上执行完全相同的功能。您应该只使用一个并使用click事件的目标，而不是拥有两个函数：

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>

小提琴here。应该是prefixed。

Answer 2

我想我理解你的目标......

我将这些功能压缩成一个，然后用className = 'slide'开始一个按钮。如果单击一个按钮，则类幻灯片始终在两个按钮之间交替显示。

演示

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

function slide() {
  btn1.classList.toggle('slide');
  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="slide();" class='slide'>
  left
</div>
<div id="btn2" onClick="slide();">
  right
</div>