Question

您好，所以我在Jquery api文档网站上找到了这个功能，但仍然不明白它是如何工作的。做了一些扩展研究但仍然不理解。

所以我要举一个例子，只是希望有人能够解决我做错了什么，做什么是正确的。

例如让我们说我想为粉红色的方块设置动画

<body>

<div id=square>

</div>

</body>
<style>
#square {
width: 100px;
height: 100px;
background: pink;
border: 1px solid aqua;
}

.square {
width: 100px;
height: 100px;
background: pink;
border: 1px solid aqua;
}


</style>


<script>
$("#square").click(function(){
$(this).animate({width: "500px",
height: "500px"
});

/* which makes this pink square animate to  500px X 500px
and then once its rechecked i put the toggle class to have it toggle        class back to .square which is the original position, But it seems not to    be working.*/

 $("#square").click(function(){
$("#square").toggleClass(".square");
});
});


</script>

Answer 1

我不确定你的html是什么，但假设#square和.square都是同一个元素，你的css会优先于你的id样式而不是类样式，所以即使班级切换你赢了＆如果id也有样式，则会看到任何变化。

此外，对于.toggleClass（）调用，您不需要在课程之前放置句点。对于addClass（），removeClass等也是如此。

在这里，我为元素提供了背景颜色，然后为类赋予了新颜色（类将覆盖css中的元素，就像ID将覆盖类一样）。

<强> HTML

<div id="square" class="square"></div>

<强> CSS

div {
    background: pink;
}
#square {
    width: 100px;
    height: 100px;
    border: 1px solid aqua;
}

.square {
    width: 100px;
    height: 100px;
    background: blue;
    border: 1px solid aqua;
}

<强>的jQuery

$("#square").click(function(){
    $("#square").toggleClass("square");
});

另外，如果它有帮助，这里是jsFiddle。

无法理解toggleClass

1 个答案: