Question

我觉得我这样做的方式与我在线阅读的方式完全一样。我实际上可以让toggleClass以有限的方式工作（Toggle sort-of success but not really），但是这个方法的问题导致我尝试 switchClass 和添加/ removeClass 而不是。但是......当我点击“按钮”时，它都没有做任何事情。

是的，我确实在同一目录中安装了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()与两个类一起用作需要切换的参数：

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

.toggleClass()方法中的第一个类应该是元素中已存在的类。在你的情况下是SolarDegree45。

Answer 2

$

上缺少("#Solar").addClass("SolarDegree45").removeClass("SolarDegree0");

应该是

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

您也可以尝试

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

switchClass和addClass（）。removeClass（）方法都不起作用

2 个答案: