Question

您好我是Web开发的新手，并且正在练习我学到的一些东西。

我建立了一个日夜切换的基本程序。点击太阳时，月亮出现，反之亦然。你可以看到文字＆＃34; Good Afternoon！＆＃34;和＃34;晚安！＆＃34;显示为默认值。我希望能够有＃34; Good Afternoon！＆＃34;只有在太阳出现时才会出现，并且“晚安！”＃34;仅在月亮出现时出现。任何帮助将不胜感激。

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，＆＃34;另一个常见的显示值是none。某些特殊元素（如脚本）将此作为默认值。它通常与JavaScript一起使用来隐藏和显示元素，而不会真正删除和重新创建它们。

这与可见度不同。将display设置为none将呈现页面，就好像该元素不存在一样。 visibility: hidden;将隐藏元素，但如果元素完全可见，元素仍会占用空间。＆＃34;

Answer 2

<强> Updated 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');
}

希望这有帮助。

＆＃13;

$(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');
    }

  });

});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

无需切换这么多课程。我清理了你的代码，告诉你如何只在.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>

Answer 4

你可以做几件事。由于您使用的是jQuery，因此以下是一个选项。

在$(document).ready()上，您可以添加以下内容。

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

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

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

您还可以为文字创建一个div，并在点击时更改文字以及它的课程。

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

4 个答案: