javascript 当歌词可见时隐藏描述，反之亦然(可能有bug吗？)

xqkwcwgp 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(155)

下面是一个非常简单的片段。
当你运行它的时候，你可以看到专辑的描述，如果你点击span，歌词出现，描述消失，如果你再次点击它，你会看到我的问题：描述和歌词都变得可见，之后点击跨度就不再起作用了。
但我想要实现的是，让代码像那个bug（或者不管是什么）一样工作，如果歌词可见，则隐藏描述，如果描述可见，则隐藏歌词
我尝试了其他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>

JavaScript

来源：https://stackoverflow.com/questions/50349600/hide-description-when-lyrics-is-visible-and-the-same-inversely-and-a-possible

2条答案

按热度按时间

l2osamch1#

您应该在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>

赞(0）回复(0）举报 2023-02-28

5q4ezhmt2#

简单的问题与您的逻辑，我冒昧地清理了标记位。

function showlyrics() {
  var albume = document.getElementById("albuminfo");
  var lyric = document.getElementById("lyrics");


  if (albume.style.display == "none") {
    albume.style.display = "block"
    lyric.style.display = "none"
  } else {
    lyric.style.display = "block"
    albume.style.display = "none"
  }
}

#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 class="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 id="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>

哦，style对象并不存储css文件中定义的样式，而是存储内联样式，但是不带条件地使用else是一种变通方法：）

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 当歌词可见时隐藏描述，反之亦然(可能有bug吗？)

2条答案

相关问题

热门标签

最新问答