Question

jquery 怎样点击两次 不同效果

============= jq代码 =========
$('#myid span').click(function(){
if($(this).hasClass("myoff")){
$(this).attr('class','myon');
}
if($(this).hasClass("myon")){
$(this).attr('class','myoff');
}
});

============= html 代码 =========
<div id="myid">
<span class="myoff">内容1</span>
<span class="myoff">内容2</span>
<span class="myoff">内容3</span>
</div>
点击span的时候，判断class名字，如果全等于myoff，则改成myon。
如果全等于myon，则改成myoff。

Answer 1

很简单的，只用一句代码就能实现：

$("#myid span").on("click",function(){
    $(this).toggleClass("myon");//如果默认显示的是myoff，这里就是myon
})

原理分析：

span 默认显示的是myoff这个样式，那么当第一次点击的时候，toggleClass就会判断是否包含myon这个样式，如果不包含，就为它添加上“myon”这个样式，这样span的样式就变成了：“<span class='myoff myon'>”，myon和myoff里有冲突的样式，就会显示myon的样式，当再次点击的时候，就会删除myon这个样式。

就是这么简单！要善用jquery里的 toggle,看下面这篇文章，也是关于“toggle”的一种用法：

网页链接

Answer 2

$ (function ()
{
$ ('#myid span').click (function ()
{
if ($ (this).attr ("class") == "myon")
{
$ (this).attr ('class', 'myoff');
}
else if ($ (this).attr ("class") == "myoff")
{
$ (this).attr ('class', 'myon');
}
});
});

追问

亲~~测试了，不行！

追答

蜜，测试了下，可以