下面是是自己写的日常普通切换动作,不知道怎么去简化,看着好冗余... 譬如怎么合并prev
和next
两个事件?委托于control-wrap
父元素上?
Live Demo
<p class="container">
<p class="box">1</p>
<p class="box">2</p>
<p class="box">3</p>
<p class="box">4</p>
<p class="box">5</p>
<p class="box">6</p>
<p class="box">7</p>
<p class="box">8</p>
<p class="box">9</p>
</p>
<p class="control-wrap">
<span class="prev">prev</span>
<span class="next">next</span>
</p>
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);
伊谢尔伦2017-04-10 18:02:35
看题主的代码js跟html不是很呼应,写错了吧
题主提到的合并,其实看prev
跟next
的逻辑区别仅仅只是comingShow
这个变量判断和赋值的处理不同。
用父元素代理,判断event.target
是prev
还是next
,然后分别处理好comingShow
,后面的逻辑都一样。
大家讲道理2017-04-10 18:02:35
先合并逻辑
很明显,prev
和next
都涉及dom
的隐藏与现实,可能以后你还要增加指示器的操作,所以把显示/隐藏
的实现封装成一个函数就好了:
function go(index) {
// 根据index进行 显示/隐藏 ...
}
那相应的prev
和next
就可以这样定义了:
function next() {
go(index + 1)
}
function next() {
go(index - 1)
}
利用事件委托是好的
tip: 如果你觉得你写的代码不够整洁优雅,可以看看别人的插件怎么写的。