下面是是自己写的日常普通切换动作,不知道怎么去简化,看着好冗余... 譬如怎么合并prev
和next
两个事件?委托于control-wrap
父元素上?
Live Demo
1
2
3
4
5
6
7
8
9
prev next
window.addEventListener('load', function () { var boxes = document.querySelectorAll('.box'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var comingShow = 0; var len = boxes.length - 1; boxes[0].style.display = 'block'; next.addEventListener('click', function (e) { if (comingShow < len) { ++comingShow; Array.prototype.slice.call(boxes).forEach(function (item) { item.style.display = 'none'; }); boxes[comingShow].style.display = 'block'; } } , false); prev.addEventListener('click', function (e) { if (comingShow > 0) { --comingShow; Array.prototype.slice.call(boxes).forEach(function (item) { item.style.display = 'none'; }); boxes[comingShow].style.display = 'block'; } } , false); }, false);
看题主的代码js跟html不是很呼应,写错了吧
题主提到的合并,其实看
prev
跟next
的逻辑区别仅仅只是comingShow
这个变量判断和赋值的处理不同。用父元素代理,判断
event.target
是prev
还是next
,然后分别处理好comingShow
,后面的逻辑都一样。先合并逻辑
很明显,
prev
和next
都涉及dom
的隐藏与现实,可能以后你还要增加指示器的操作,所以把显示/隐藏
的实现封装成一个函数就好了:那相应的
prev
和next
就可以这样定义了:利用事件委托是好的
tip: 如果你觉得你写的代码不够整洁优雅,可以看看别人的插件怎么写的。