Javascript 需要通过动态切换类来帮助理解DIV的可见性问题吗_Javascript_Jquery_Html_Visibility

Javascript 需要通过动态切换类来帮助理解DIV的可见性问题吗

javascript jquery html

Javascript 需要通过动态切换类来帮助理解DIV的可见性问题吗,javascript,jquery,html,visibility,Javascript,Jquery,Html,Visibility,此代码尝试将StateContainer div的类从StateOne动态切换到state2，以改变div的可见性当我运行它时，我总是在单击按钮之前和之后看到以下内容 Visible first Visible first Visible first Visible first 如果您能给我一些建议，解释为什么这段代码不能按我期望的方式工作，我将不胜感激 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

此代码尝试将StateContainer div的类从StateOne动态切换到state2，以改变div的可见性

当我运行它时，我总是在单击按钮之前和之后看到以下内容

Visible first
Visible first
Visible first
Visible first

如果您能给我一些建议，解释为什么这段代码不能按我期望的方式工作，我将不胜感激

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>

<script type="text/javascript">
    $(document).ready(function()
    {

    $('.x').click(
       var s = document.GetElementById('StateContainer');
       s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
    );

    });
</script>

</head>
<body>

<button class="x">Change StateContainer</button>

<div class="StateOne" id="StateContainer">
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
</div>

</body>
</html>


无标题文件
.StateOne.InitiallyHidden{display:none；}
.StateTwo.InitiallyVisible{display:none；}
$（文档）.ready（函数（）
{
$（'.x'）。单击(
var s=document.GetElementById（'StateContainer'）；
s、 className=（s.className='StateOne'？'StateTwo'：'StateOne'）；
);
});
更改状态容器
首先可见
可见秒
首先可见
可见秒
首先可见
可见秒
首先可见
可见秒

看起来您没有正确使用

单击事件。您需要为其提供一个功能：
$('.x').click(function() {
       var s = document.getElementById('StateContainer');
       s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});

另外，如果您已经在使用jQuery，那么以下语法比document.getElementById
要短得多（顺便说一句，它没有大写字母G）：
史蒂夫谢谢你。搔头到此为止。酷。这是一个很好的速记语法。与soon交谈-我添加了您的速记表-var s=$（“#StateContainer”）；它停止工作了。你确定你写对了吗？奇怪。根据jQuery文档，它应该可以工作：。它停止工作，因为执行$（“#StateContainer”）会返回一个包装集，而不是您正在使用的本机元素。如果您将其称为s[0]。className，则它将起作用。
var s = $("#StateContainer")[0];