switchClass 和 addClass().removeClass() 方法都不起作用

Question

我觉得我正在按照我在网上阅读的方式来做这件事。实际上，我可以让 toggleClass 以有限的方式工作 (Toggle sort-of success but not really)，但该方法的问题导致我尝试 switchClass 和 add/removeClass 代替。但是......当我点击 "button".

时也没有任何反应

是的，我确实在同一目录中安装了 jQuery（因此 toggleClass 有时可以正常工作）。

这是页面：Switch fail

我会尝试提供下面的代码（请耐心等待，这是我第一次在这里发帖）：

<html>
<head>
<title>Haunted Bucks County (HBC)</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.animate-shadow.js"></script>
<style><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"></style>

<style>
#Solar.SolarDegree0 {
    position:absolute;
    top:0;
    background-color:orange;
    margin:0px 0px 0px 100px;
    transform: perspective( 600px ) rotateY( 0deg );
    -webkit-transition: all 500ms;
}
#Solar.SolarDegree45 {
    position:absolute;
    top:0;
    background-color:yellow;
    margin:0px 0px 0px -250px;
    transform: perspective( 600px ) rotateY( 45deg );
    -webkit-transition: all 500ms;
}
</style>
</head>
<body topmargin="0" leftmargin="0" rightmargin="0">

<div id="Solar" class="SolarDegree0" style="height:250px; width:450px;">

</div>



<div id="Weather" style="height:50px; width:150px; background-color:red; margin:0px 0px 0px 100px; position: absolute; top:250px;">

</div>


<script type="text/javascript">
    /*
    $("#Weather").click(function() {
        $("#Solar").toggleClass("SolarDegree45");
    });
    */
    $("#Weather").click(function() {
        /*$("#Solar").switchClass("SolarDegree0", "SolarDegree45");*/
        ("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0");
        /*("#Solar").css({'width': '200px'});*/
    });


</script>


</body>
</html>

Answer 1

可以使用.toggleClass()，有两个class作为需要切换的参数：

$("#Solar").toggleClass("SolarDegree45 SolarDegree0");

.toggleClass()方法中的第一个class应该是元素中已经存在的方法。在你的例子中是 SolarDegree45。

Answer 2

在 ("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0");

上缺少 $

应该是

$("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0");

你也可以试试

$("#Weather").click(function() {
    $("#Solar").toggleClass("SolarDegree45 SolarDegree0");
});

switchClass 和 addClass().removeClass() 方法都不起作用

Neither switchClass nor addClass().removeClass() methods working

jquery

css-transitions

jquery-animate

animate.css