gpt4 book ai didi

javascript - 如何在激活另一个元素时关闭一个元素?

转载 作者:行者123 更新时间:2023-11-30 09:45:48 26 4
gpt4 key购买 nike

我有两个元素。如果 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>

最佳答案

您混淆了纯 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>

关于javascript - 如何在激活另一个元素时关闭一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38958854/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com