首頁  >  問答  >  主體

javascript - 简单JS切换代码简化

下面是是自己写的日常普通切换动作,不知道怎么去简化,看着好冗余... 譬如怎么合并prevnext两个事件?委托于control-wrap父元素上?

Live Demo

HTML

<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>

JS

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);
天蓬老师天蓬老师2773 天前395

全部回覆(2)我來回復

  • 伊谢尔伦

    伊谢尔伦2017-04-10 18:02:35

    看题主的代码js跟html不是很呼应,写错了吧

    题主提到的合并,其实看prevnext的逻辑区别仅仅只是comingShow这个变量判断和赋值的处理不同。

    用父元素代理,判断event.targetprev还是next,然后分别处理好comingShow,后面的逻辑都一样。

    回覆
    0
  • 大家讲道理

    大家讲道理2017-04-10 18:02:35

    先合并逻辑
    很明显,prevnext都涉及dom的隐藏与现实,可能以后你还要增加指示器的操作,所以把显示/隐藏的实现封装成一个函数就好了:

    function go(index) {
      // 根据index进行 显示/隐藏 ...
    }

    那相应的prevnext就可以这样定义了:

    function next() {
        go(index + 1)
    }
    function next() {
        go(index - 1)
    }

    利用事件委托是好的

    tip: 如果你觉得你写的代码不够整洁优雅,可以看看别人的插件怎么写的。

    回覆
    0
  • 取消回覆