javascript - 简单JS切换代码简化

问题描述

问 题

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

Live Demo

HTML

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>
<div class="control-wrap">
    <span class="prev">prev</span>
    <span class="next">next</span>
</div>

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

解决方案

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

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

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

这篇关于javascript - 简单JS切换代码简化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！