Question

javascript实现同一元素onlick两次，第一次和第二次调用不同函数

假设有个div，本来宽200px：
1）onclick它一下，宽变成500px
2）然后再onclick它一下，宽度又缩短回200px
3）再onclick它，宽度又变长..

我自己想到两个办法：
设个计数器，计数器值为单数 -> 调用div变长的函数 || 能被整除则为双数 -> 调用div变短的函数
判断div宽=200px -> 变长函数 || 宽>200px -> 变短函数

不用上代码，我想知道有没更好的实现这个效果的思路，给我说下思路就行，谢啦！

Answer 1

可以用jquery的toggleClass()函数 呀

1、先设定一个样式.widthStyle{width:500px}

2、$("#...(id)").toggleClass("widthStyle"); 这样就行了

jquery基本兼容各种浏览器 所以开发的时候js基本上是要被jquery取代的 不懂的请继续追问

Answer 2

设个计数器，计数器值为单数 -> 调用div变长的函数 || 能被整除则为双数 -> 调用div变短的函数
这样就挺好啊。
用个标记，0或者1，然后执行不同的操作~

追答

问题解决了吗

已通知提问者对您的回答进行评价，请稍等

Answer 3

直接一个方法实现啊，也不用带参，用一条？表达式判断赋值就OK了，判断div200宽度就赋值500，否则就赋值200：document。getElementById().style.width=document。getElementById().style.width=="200"?"500":"200";

Answer 4

做两个div，一个200的一个500的，点按钮的时候判断是哪个div是显示状态，把这个隐藏另一个显示

Answer 5

$('selector').on('click', function(){
    var el = $(this);
    if(el.width() == 200){
        el.css('width', '500px');
    }else{
        el.css('width', '200px');
    }
});