30.项目 1-博客前端：封装库--切换

学习要点：

1.问题所在
2.设置代码

切换效果，就是通过点击来实现不同的效果，而每次点击会步骤执行下一次函数的过程。

一．问题所在

1.参数问题。
2.点击切换计数问题。
3.多个切换物计数。

QQ截图20190516094810.png

二．设置代码

//设置点击切换方法
Base.prototype.toggle = function () {
for (var i = 0; i < this.elements.length; i ++) {
var args = arguments;
var count = 0;
addEvent(this.elements[i], 'click', function () {
args[count++ % args.length]();
});
}
return this;
};
//调用
$('#button').toggle(function () {
$('#box').css('background', 'blue');
}, function () {
$('#box').css('background', 'green');
}, function () {
$('#box').css('background', 'red');
});
$('#button2').toggle(function () {
$('#pox').css('background', 'blue');
}, function () {
$('#pox').css('background', 'green');
}, function () {
$('#pox').css('background', 'red');
});

感谢收看本次教程！