下面是这个非常简单的片段。
当你运行它时,你可以看到专辑描述,如果你点击span
,就会出现歌词,而描述消失。如果你再次点击它,你会看到我的问题:描述和歌词都变得可见,点击 span 之后什么都没有了。
但我想要实现的是让代码像那个错误(或其他任何东西)一样工作,如果歌词可见,则隐藏描述,如果描述可见,则隐藏歌词
我尝试了一些与其他 if
、 else if
或 else
语句的变体,也在 for 中尝试了一些东西
循环,但我无法让它工作。
我怎样才能做到这一点?
function showlyrics(){
document.getElementById("albuminfo").style.display="none";
var lyrics=document.getElementById("songlyrics");
lyrics.style.display = (lyrics.style.display === 'block' ? 'none' : 'block');
if(lyrics.style.display==="none"){
document.getElementById("albuminfo").style.display="block";
//whatever;
//If I write anything after setting albuminfo a block display (UNCOMMENT "whatever;" TO SEE) and I close it, it's actually working as I want it, but I have no idea why, if you could explain this too, I'd appriciate it
}
//I don't know if this part is necessarry, so I'll just leave it here
var hideotherlyrics = document.getElementsByClassName("lyrics");
var i;
for (i = 0; i < hideotherlyrics.length; i++) {
hideotherlyrics[i].style.display = "none";
document.getElementById("songlyrics").style.display="blocK";
}
}
#starslyrics{
position:absolute;
top:3%;
right:40%;
font-size:25px;
font-weight:bold;
}
.hover:hover,.hover a:hover{
border-radius:5px;
border:none;
cursor:pointer;
background-color:red;
color:white;
}
.lyrics{
display:none;
position:relative;
margin-top:50px;
font-size:18px;
}
#albuminfo{
text-align:justify;
width:400px;
font-size:18px;
margin-top:50px;
}
<div id="lyrics">
<p id="albuminfo">
THIS IS THE <strong>ALBUM DESCRIPTION</strong><br><br> IF THIS IS VISIBLE, THE SONG LYRICS SHOULDN'T BE
</p>
<p class="lyrics" id="songlyrics">
THIS IS THE <strong>SONG LYRICS</strong><br><br> IF THIS IS VISIBLE, THE ALBUM DESCRIPTION SHOULDN'T BE
</p>
<span class="hover" onclick="showlyrics()" id="starslyrics">Click here</span>
</div>
最佳答案
您应该在 showlyrics()
函数之外定义和设置初始值。否则,它们不会存储显示状态,每次您单击该功能时,它都会重置之前的状态。
var description = document.getElementById("albuminfo");
var lyrics = document.getElementById("songlyrics");
description.style.display = "none";
lyrics.style.display = "block";
function showlyrics(){
if(lyrics.style.display === "block"){
description.style.display = "block";
lyrics.style.display = "none";
} else {
description.style.display = "none";
lyrics.style.display = "block";
}
}
#starslyrics{
position:absolute;
top:3%;
right:40%;
font-size:25px;
font-weight:bold;
}
.hover:hover,.hover a:hover{
border-radius:5px;
border:none;
cursor:pointer;
background-color:red;
color:white;
}
.lyrics{
display:none;
position:relative;
margin-top:50px;
font-size:18px;
}
#albuminfo{
text-align:justify;
width:400px;
font-size:18px;
margin-top:50px;
}
<div id="lyrics">
<p id="albuminfo">
THIS IS THE <strong>ALBUM DESCRIPTION</strong><br><br> IF THIS IS VISIBLE, THE SONG LYRICS SHOULDN'T BE
</p>
<p class="lyrics" id="songlyrics">
THIS IS THE <strong>SONG LYRICS</strong><br><br> IF THIS IS VISIBLE, THE ALBUM DESCRIPTION SHOULDN'T BE
</p>
<span class="hover" onclick="showlyrics()" id="starslyrics">Click here</span>
</div>
关于javascript - 当歌词可见时隐藏描述,反之亦然(和可能的错误?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50349600/