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

Question

大家好，我是网络开发的新手，正在练习我学到的一些东西。

我构建了一个基本程序来切换白天和黑夜。当您单击太阳时，月亮会出现，反之亦然。你可以看到文字“下午好!”和“晚安!”默认显示。我希望能够有“下午好!”只有当太阳存在和“晚安!”时才会出现。只有在月亮出现时才会出现。任何帮助将不胜感激。

Here is the fiddle .

我尝试了一些类似于此的方法来模仿其他代码，但我知道这是不正确的。

/*toggle text*/
if ($('#daytext').hasClass('visible')) {
  $('#daytext').removeClass('visible');
} else {
  $('#daytext').removeClass('visible');
}

Answer 1

您可以使用 CSS 属性来实现这一点。

查看 visibility : hidden; 和 display : none;。

来自 here , "另一个常见的显示值是 none。一些专门的元素(例如脚本)使用它作为它们的默认值。它通常与 JavaScript 一起使用来隐藏和显示元素，而不真正删除和重新创建它们。

这与可见性不同。将 display 设置为 none 将呈现页面，就好像该元素不存在一样。 visibility: hidden; 将隐藏该元素，但该元素仍将占据其完全可见时的空间。”