logo标签列表

当单击div时如何使文本出现和消失？

javascriptjqueryhtmlcss
3

你好，我是一名新手网页开发者，正在练习一些学到的东西。

我建立了一个基本程序来切换白天和黑夜。当你点击太阳时，月亮出现，反之亦然。你可以看到文本“Good Afternoon！”和“Good Night！”作为默认值出现。我希望能够在太阳出现时只显示“Good Afternoon！”，在月亮出现时只显示“Good Night！”。任何帮助将不胜感激。

这里是代码.

我尝试了类似于下面的代码来模仿其他代码，但我知道它是不正确的。

/*toggle text*/
if ($('#daytext').hasClass('visible')) {
  $('#daytext').removeClass('visible');
} else {
  $('#daytext').removeClass('visible');
}
4个回答
3
你可以使用CSS属性来实现这一点。
看看visibility: hidden;和display: none;。
从这里，"另一个常见的显示值是none。一些专门的元素，如脚本，使用它作为它们的默认值。它通常与JavaScript一起使用，以隐藏和显示元素，而不是真正地删除和重新创建它们。
这与可见性不同。将display设置为none将呈现页面，就好像该元素不存在。 visibility: hidden;将隐藏元素，但元素仍将占据它完全可见时的空间。"
1

更新的fiddle。

你只需要默认隐藏Good Night!，然后使用jQuery方法show()/hide()在点击时切换可见性：

if ($('#orb').hasClass('sun')) {
    $('#daytext').hide();
    $('#nighttext').show();
    $('#orb').removeClass('sun').addClass('moon');
} else {
    $('#daytext').show();
    $('#nighttext').hide();
    $('#orb').removeClass('moon').addClass('sun');
}

希望这有所帮助。 

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#orb').hasClass('sun')) {
     $('#daytext').hide();
      $('#nighttext').show();
      $('#orb').removeClass('sun').addClass('moon');
    } else {
     $('#daytext').show();
      $('#nighttext').hide();
      $('#orb').removeClass('moon').addClass('sun');
    }

    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

    /*toggle visible moonspots*/
    if ($('#moonspot1').hasClass('visible')) {
      $('#moonspot1').removeClass('visible');
    } else {
      $('#moonspot1').addClass('visible');
    }
    if ($('#moonspot2').hasClass('visible')) {
      $('#moonspot2').removeClass('visible');
    } else {
      $('#moonspot2').addClass('visible');
    }
    if ($('#moonspot3').hasClass('visible')) {
      $('#moonspot3').removeClass('visible');
    } else {
      $('#moonspot3').addClass('visible');
    }
    /*toggle text*/
    if ($('#daytext').hasClass('visible')) {
      $('#daytext').removeClass('visible');
    } else {
      $('#daytext').removeClass('visible');
    }

  });

});
#orb {
  height: 300px;
  width: 300px;
  border-radius: 100%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}

#sky {
  height: 100%;
  width: 100%;
}

.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}

.sun:hover {
  border: 20px solid #f1c40f;
}

.moon {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}

.moon:hover {
  border: 20px solid #eaeff2;
}

.night {
  background-color: #2c3e50;
}

.day {
  background-color: #aaecf2;
}

#moonspot1 {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot2 {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

#moonspot3 {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  float: right;
  margin: 20px;
}

.visible {
  background-color: #eaeff2;
}

#daytext {
  font-size: 50px;
  font-family: Optima;
}

#nighttext {
  font-size: 50px;
  font-family: Optima;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div id="moonspot1"></div>
    <div id="moonspot2"></div>
    <div id="moonspot3"></div>
  </div>
  <div id = "daytext">Good Afternoon!</div>
  <div id = "nighttext" style='display:none'>Good Night!</div>
</body>

0

不需要切换那么多类。我整理了你的代码，向你展示如何只使用 .day 和 .night 类之间进行切换来完成相同的事情。我使用 display: none 来隐藏与该状态无关的元素。

$(document).ready(function() {
  $('#orb').click(function() {

    /*Day and night toggle*/
    if ($('#sky').hasClass('day')) {
      $('#sky').removeClass('day').addClass('night');
    } else {
      $('#sky').removeClass('night').addClass('day');
    }

  });
});
#sky {
  height: 100%;
  width: 100%;
}
.night {
  background-color: #2c3e50;
}
.day {
  background-color: #aaecf2;
}

#orb {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  padding: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  botton 0;
  right: 0;
}
.sun {
  background-color: #ffdd00;
  border: 10px solid #f1c40f;
}
.sun:hover {
  border: 20px solid #f1c40f;
}
/* styling the #sky.night .sun to be the moon */
.night .sun {
  background-color: #bdc3c7;
  border: 10px solid #eaeff2;
}
.night .sun:hover {
  border: 20px solid #eaeff2;
}

/* common styles for the 3 moonspots */
.moonspot {
  background-color: #eaeff2;
  border-radius: 50%;
  float: right;
  margin: 20px;
}
/* hide moonspots during day */
.day .moonspot {
  display: none;
}
#moonspot1 {
  height: 50px;
  width: 50px;
}
#moonspot2 {
  height: 80px;
  width: 80px;
}
#moonspot3 {
  height: 150px;
  width: 150px;
}

.text {
  font-size: 50px;
  font-family: Optima;
  /* position & z-index to put text above other elements */
  position: relative;
  z-index: 1;
}
/* hide the irrelevant text based on day/night */
.day #nighttext {
  display: none;
}
.night #daytext {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
  <div id="orb" class="sun">
    <div class="moonspot" id="moonspot1"></div>
    <div class="moonspot" id="moonspot2"></div>
    <div class="moonspot" id="moonspot3"></div>
  </div>
  <div class="text" id="daytext">Good Afternoon!</div>
  <div class="text" id="nighttext">Good Night!</div>
</body>

0
你可以做很多事情。由于你正在使用jQuery，以下是一个选项。
在$(document).ready()中，你可以添加以下内容。
$('#nighttext').toggle();

然后在您的点击函数中，您可以执行以下操作：

$('#daytext').toggle();
$('#nighttext').toggle();

你也可以创建一个单独的 div 来存放文本，并在点击时更改文本及其类名。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接