javascript - Jquery toggleClass不适用于元素

Question

我正在尝试应用一个 toggleClass，但它没有应用新的类。这是怎么回事？

<a href="#" id="cf_onclick">Click</a> 
<div id="main" class="invisible">
Hi there            
</div> 

.invisible{
   opacity: 0;

}
.visible{
  opacity: 1;
  -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
}


$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#main").toggleClass("visible");
});
});

这是jsFiddle

http://jsfiddle.net/Gilgamesh415/grxQX/17/

Answer 1

如果你的意思是你的小提琴，你忘了jQuery在 jsfiddle 窗口的左上角添加库。

在这里检查

如果您的意思是您的网站，请通过<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>在您的头部标签中添加来检查您是否加载了 jQuery 库。

Answer 2

尝试这个：

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

$("#main").toggleClass("n");
});
});
</script>



<div id="main" class="m"></div>
<button id="s">click</button>

<style type="text/css">
    .m
{ opacity:0;}
.n
{
 width:100px;
    height:100px;
    border:2px solid yellow;
    background:green; 
    -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
  -o-transition: opacity 3s ease-in-out;
  transition: opacity 3s ease-in-out;
    opacity: 1;   
}
</style>

在这里演示：http: //jsfiddle.net/65Hg4/1/

Answer 3

并尝试使用自调用匿名函数：

(function(){
.... //your code
}(jQuery));

代替

$(document).ready(function(){...});

由于最佳实践是在页面底部加载脚本，就在结束</body>标记之前，您不需要检查文档是否已加载（$（document）.ready（）），它已经加载了。

像这样http://jsfiddle.net/micka/94pNW/

Answer 4

$("#cf_onclick").click(function(e) {
   e.preventDefault();
  $("#main").toggleClass("invisible").toggleClass("visible");
});

http://jsfiddle.net/grxQX/18/