Question

我有两个要素。如果1已经打开，那么当我在2上切换时，1应该关闭。我还是javascript的新手，所以如果有人请求帮助，请谢谢。现在，当我尝试点击时，没有任何反应，如果我删除while循环，那么它的工作原理。也许我有一些错误，我不确定，但它看起来正确的逻辑。

<style>
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}

.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
</style>
</head>
<body>

<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
<script>
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
function myFunction() {
x.classList.toggle("newClassName");
}
function myFunction2() {
y.classList.toggle("newClassName");
}
while (x.classList.contains("newClassName")) {
if (y.classList.contains("newClassName") = true) {
     x.classList.toggle("newClassName")；
}
}

</script>
</body>

Answer 1

你混合了纯JavaScript和jQuery。我重写了脚本。我想这就是你想要的......

var x = $("#myDIV");
var y = $("#myDIV2");

function myFunction() {
    x.toggleClass("newClassName");
  
    if( x.hasClass("newClassName") ) {
        y.removeClass("newClassName");
    }
}

function myFunction2() {
    y.toggleClass("newClassName");
  
    if( y.hasClass("newClassName") ) {
        x.removeClass("newClassName");
    }
}

.mystyle {
  width: 300px;
  height: 50px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

.newClassName {
  width: 400px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  font-size: 25px;
  color: navy;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>

<div id="myDIV" class="mystyle">
  I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
  I am a DIV element2
</div>

Answer 2

您不需要while loop

你将普通的JS与jQuery混合在一起。代码被评论 Working fiddle

修改

正如评论中所指出的，我的答案应该包括代码，所以这里是：

<强>的Javascript

$(function() { // This part was proposed by eisbehr
var div1 = $('#myDIV');
var div2 = $('#myDIV2');

$('#btn1').click(function() {
    div1.toggleClass('newClassName');

    if (div2.hasClass('newClassName')) {
        div2.removeClass('newClassName');
    }
});

$('#btn2').click(function() {
    div2.toggleClass('newClassName');

    if (div1.hasClass('newClassName')) {
        div1.removeClass('newClassName');
    }
});

}）;

<强> HTML

<p>Click the button to toggle between two classes.</p>
<button id="btn1">Try it</button>
<button id="btn2">Try it 2</button>

<div id="myDIV" class="mystyle">
  I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
  I am a DIV element2
</div>

Answer 3

您可以将所有功能全部减少到一个功能，因为来自MDN：

toggle（String [，force]）当只有一个参数时：切换类值;即，如果类存在则删除它并返回false，否则返回false，然后添加它并返回true。当存在第二个参数时：如果第二个参数为true，则添加指定的类值，如果为false，则将其删除。

所以代码是：

＆＃13;

var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
function myFunction() {
  var result = x.classList.toggle("newClassName");
  y.classList.toggle("newClassName", !result);
}

＆＃13;

.mystyle {
  width: 300px;
  height: 50px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

.newClassName {
  width: 400px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  font-size: 25px;
  color: navy;
  margin-bottom: 10px;
}

＆＃13;

<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction()">Try it 2</button>

<div id="myDIV" class="mystyle">
    I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
    I am a DIV element2
</div>

＆＃13;

如何在激活另一个元素时关闭元素？

3 个答案:

修改