Javascript 单击div时如何使文本显示和消失？

您好，我对网络开发非常陌生，并且正在实践我学到的一些东西

我建立了一个基本的程序来切换白天和黑夜。单击太阳时，月亮出现，反之亦然。您可以看到文本“午安！”和“晚安！”显示为默认值。我希望“午安”只在太阳出现的时候出现，“晚安”只在月亮出现的时候出现。任何帮助都将不胜感激

我尝试了一些与此类似的东西来模仿其他代码，但我知道这是不正确的

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

---

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

查看

可见性：隐藏和
显示：无

From，“另一个常见的显示值是none。一些专用元素（如script）将其作为默认值。它通常与JavaScript一起使用，以隐藏和显示元素，而无需真正删除和重新创建它们

这与可见性不同。将“显示”设置为“无”将使页面显示为该元素不存在。
可见性：隐藏；
将隐藏该元素，但该元素仍将占用完全可见时的空间。“

你只需隐藏
晚安show（）/hide（）
：

希望这有帮助


$（文档）.ready（函数（）{
$（'#orb'）。单击（函数（）{
/*昼夜切换*/
if（$（'#orb'）.hasClass（'sun'））{
$（'#daytext'）.hide（）；
$（'#nighttext'）.show（）；
$（'#orb'）.removeClass（'sun'）.addClass（'moon'）；
}否则{
$（'#daytext'）.show（）；
$（'#nighttext'）.hide（）；
$（'#orb'）.removeClass（'moon'）.addClass（'sun'）；
}
if（$（'#sky'）.hasClass（'day'））{
$（'#sky'）.removeClass（'day'）.addClass（'night'）；
}否则{
$（“#天空”）.removeClass（'night'）.addClass（'day'）；
}
/*切换可见的月斑*/
if（$（'#moonspot1'）.hasClass（'visible'））{
$（'#moonspot1'）。removeClass（'visible'）；
}否则{
$（'#moonspot1'）.addClass（'visible'）；
}
if（$（'#moonspot2'）.hasClass（'visible'））{
$（“#moonspot2”）.removeClass（'visible'）；
}否则{
$（'#moonspot2'）.addClass（'visible'）；
}
if（$（'#moonspot3'）.hasClass（'visible'））{
$（“#moonspot3”）.removeClass（'visible'）；
}否则{
$（'#moonspot3'）.addClass（'visible'）；
}
/*切换文本*/
if（$（'#daytext'）.hasClass（'visible'））{
$（“#daytext”）.removeClass（'visible'）；
}否则{
$（“#daytext”）.removeClass（'visible'）；
}
});
});
#orb{
高度：300px；
宽度：300px；
边界半径：100%；
填充：20px；
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
波顿0；
右：0；
}
#天空{
身高：100%；
宽度：100%；
}
孙先生{
背景色：#ffdd00；
边框：10px实心#f1c40f；
}
孙：悬停{
边框：20px实心#f1c40f；
}
月亮先生{
背景色：#bdc3c7；
边框：10px实心#eaeff2；
}
.月亮：悬停{
边框：20px实心#eaeff2；
}
.晚上{
背景色：#2c3e50；
}
.天{
背景色：#aaecf2；
}
#月球站1{
高度：50px；
宽度：50px；
边界半径：100%；
浮动：对；
利润率：20px；
}
#月球站2{
高度：80px；
宽度：80px；
边界半径：100%；
浮动：对；
利润率：20px；
}
#月球站3{
高度：150像素；
宽度：150px；
边界半径：100%；
浮动：对；
利润率：20px；
}
.可见{
背景色：#eaeff2；
}
#日文{
字体大小：50px；
字体系列：Optima；
}
#夜间文本{
字体大小：50px；
字体系列：Optima；
}

下午好
晚安
不需要切换这么多类。我清理了你的代码，向你展示了如何通过在
.day
和
.night
类之间切换来完成同样的事情。我使用
display:none
根据该状态隐藏不相关的元素


$（文档）.ready（函数（）{
$（'#orb'）。单击（函数（）{
/*昼夜切换*/
if（$（'#sky'）.hasClass（'day'））{
$（'#sky'）.removeClass（'day'）.addClass（'night'）；
}否则{
$（“#天空”）.removeClass（'night'）.addClass（'day'）；
}
});
});
#天空{
身高：100%；
宽度：100%；
}
.晚上{
背景色：#2c3e50；
}
.天{
背景色：#aaecf2；
}
#圆球{
高度：300px；
宽度：300px；
边界半径：50%；
填充：20px；
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
波顿0；
右：0；
}
孙先生{
背景色：#ffdd00；
边框：10px实心#f1c40f；
}
孙：悬停{
边框：20px实心#f1c40f；
}
/*设计天空、夜晚、太阳和月亮*/
.晚上.太阳{
背景色：#bdc3c7；
边框：10px实心#eaeff2；
}
太阳：悬停{
边框：20px实心#eaeff2；
}
/*3个月斑的常见样式*/
.月球黑子{
背景色：#eaeff2；
边界半径：50%；
浮动：对；
利润率：20px；
}
/*白天隐藏月斑*/
.白天.月点{
显示：无；
}
#月球站1{
高度：50px；
宽度：50px；
}
#月球站2{
高度：80px；
宽度：80px；
}
#月球站3{
高度：150像素；
宽度：150px；
}
.文本{
字体大小：50px；
字体系列：Optima；
/*将文本置于其他元素之上的位置（&z）索引*/
位置：相对位置；
z指数：1；
}
/*根据白天/晚上隐藏不相关的文本*/
.day#nighttext{
显示：无；
}
.night#daytext{
显示：无；
}

下午好
晚安
你可以做几件事。由于您使用的是jQuery，下面是一个选项

在
$（document）.ready（）
上，可以添加以下内容

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

然后在单击功能中，可以执行以下操作：

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

您还可以为文本创建一个
div
，并在单击时更改文本及其类

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