Question

您好我有关于简单Javascript功能的问题。下面的代码很容易看出当用户点击单击按钮我要切换类时我的意思是当页面加载“This is para”时需要显示然后当用户点击单击按钮时文本需要更改为这已更新。但不知道为什么它不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>untitled</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">
   .none {
    display: none;
   }
 .display1 {
  display: block;
 }
  </style>
</head>
<body>
<p id="default">This is para</p>
<p id="updated" style="display:none">This is updated</p>
<p><input type="button" value="Click" id="button1" /></p>

<script type="text/javascript">
$(document).ready(function(){
 $("#button1").click(function(){
  $("#default").addClass("none"); 
  $("#updated").addClass("display1");
 });

});
</script>
</body>
</html>

Answer 1

请改为：

$("#default").hide(); 
$("#updated").show();

你可以摆脱none和display1类。

发生在你身上的是style="display:none"优先于某个类，所以它永远不会显示出来。

Answer 2

为什么您不只是使用show()和hide()？

<script type="text/javascript">
$(document).ready(function(){
 $("#button1").click(function(){
  $("#default").hide(); 
  $("#updated").show();
 });

});
</script>

如果您只想更改文字，而不是有两个元素，为什么不删除updated元素并使用.text()，如下所示：

<script type="text/javascript">
$(document).ready(function(){
 $("#button1").click(function(){
  $("#default").text("This is updated");
 });

});
</script>

Answer 3

你的“addClass”调用（可能）正在工作，但直接在元素上的样式胜过CSS提供的样式。

就我个人而言，更喜欢通过改变这样的“类”值来做这类事情，但你不能真正混合和匹配这两种方法。（好吧，你可以，但这很容易让人感到困惑和容易出错。）而不是用这种风格开始你的元素，而不是你的“无”类。

单击时切换类

3 个答案: