点击切换类答案

【问题标题】：Switching Classes on Click点击切换类
【发布时间】：2010-11-10 21:14:02
【问题描述】：

您好，我有一个关于简单 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>

【问题讨论】：

为什么不直接使用 jQuery 的 show() 和 hide() 函数？
我可以，但只是想澄清一下我对 jquery.addclass 的概念。
@add class 和 remove class 主要用于在运行时应用 css 属性，用于显示和关闭你应该像其他人提到的那样使用
@gov 我个人不同意，主要是因为它更具侵入性。操作元素类将外观决定排除在代码和它们所属的 CSS 之外。代码做出决策并更新 DOM 的逻辑状态。
另外@Jay，我可以建议你为你的问题想一个更好的标题吗？ “javascript 问题”有点笼统，你不觉得吗？

标签： javascript jquery html css

【解决方案1】：

改为这样做：

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

您可以摆脱 none 和 display1 类。

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

【讨论】：

但我不想在页面加载时第一次显示#updated。
您可以将style="display:hidden;" 添加到#updated 元素中。 show() 仍然可以工作

【解决方案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>

【讨论】：

如果由于某种原因需要上课，它就不起作用，因为他没有摆脱 style="display:none;"在第二个（您的代码将修复）。所以我建议 OP 使用你的代码，或者如果他需要类，将 $("#updated").addClass("display1"); 更改为 $("#updated").show().addClass("display1"); 但是当然，如果这些类的全部目的是显示段落，那么使用类是没有意义的。抱歉跑题了。 :)
@Andrew 我不认为以这种方式使用类毫无意义——这是一种非常合理的方法。不过，他当然不应该混搭！
@Pointy 好吧，我认为如果这是唯一的功能并且 show() 和 hide() 是专门为此目的而制作的，那是没有意义的。
是的，但他们实现其目的的方式并不那么干净。它在 Javascript 代码中嵌入了布局/设计决策。

【解决方案3】：

您的“addClass”调用（可能）有效，但直接在元素上的样式胜过 CSS 提供的样式。

我个人更喜欢通过改变“类”值来做那种事情，但你不能真正混合和匹配这两种方法。（嗯，您可以，但它会造成混淆且容易出错。）不要以这种样式开始您的元素，而是给它您的“none”类。

【讨论】：