问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

两个相似的函数怎么写成一个函数？

头像
poi_rs
    4791697125

    js代码里面的toLeft和toRight函数。
    我的思路是这样的，不知道对不对：点击的时候判断是prev还是next，根据这个传入1或者-1，但是判断prev和next的时候要获取event当前目标，那么toLeft和toRight 就要有一个event参数，这个参数在用addEventListener的时候怎么传？
    如果这是错误的，应该怎么做？

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style-type: none;
        }

        figure {
            overflow: hidden;
            position: relative;

            width: 100%;
            height: 400px;
        }

        ul {
            position: absolute;
            width: calc(100%*4);
            height: 400px;
        }

        li {
            /*position: absolute;*/
            float: left;
            text-align: center;

            width: calc(100%/4);
            height: 400px;
            line-height: 400px;
            
            box-sizing: border-box;
            border: 1px solid #333;
        }

        .ctrl>span {
            position: absolute;
            top: calc(50% - 35px);
            text-align: center;

            width: 40px;
            height: 70px;
            line-height: 70px;


            color: #fff;
            background-color: #eee;
        }

        .prev {
            left: 30px;
        }
        .next {
            right: 30px;
        }

        figure:hover .ctrl>span{
            background-color: #333;
            transition: background-color 1s;
        }

    </style>
</head>
<body>
    <figure>
        <ul>
            <li class="no1">第一张</li>
            <li class="no2">第二张</li>
            <li class="no3">第三张</li>
            <li class="no4">第四张</li>
        </ul>

        <div class="ctrl">
            <span class="next"> > </span>
            <span class="prev"> < </span>
        </div>
    </figure>

    <script>
        window.onload = (function(){
            var num = 0;

            var next = document.querySelector('.next');
            var prev = document.querySelector('.prev');

            var ul = document.querySelector('ul');
            var allLi = document.querySelectorAll('li');
            var liWidth = parseInt(ul.offsetWidth, 10) / allLi.length;

            ul.style.left = 0 + 'px';
            
            function toLeft() {
                num += 1;
                if (num > 3) {
                    num = 0;
                    ul.style.left = 0 + 'px';
                    return false;
                }
                ul.style.left = -num * liWidth + 'px'; 
            }
            function toRight() {
                num -= 1;
                if (num < 0) {
                    num = 3;
                    ul.style.left = -num * liWidth + 'px';
                    return false;
                }
                ul.style.left = -num * liWidth + 'px';
            }

            next.addEventListener('click', toLeft, false);
            prev.addEventListener('click', toRight, false);

        })()
    </script>
</body>
</html>
    javascript
    阅读 1.8k
    1 个回答
    得票最新
    头像
    crp205
      3.9k3821
      ✓ 已被采纳

      可以的，你思路也没错;如果你要传参数，可以这样

      function toLR(nums){
    return function(){
        num+=nums;
        if(num>3){
            num = 0;
            ul.style.left = 0 + 'px';
            return false;
        }else if(num<0){
            num = 3;
            ul.style.left = -num * liWidth + 'px';
            return false;
        }
        ul.style.left = -num * liWidth + 'px'
    }
}
next.addEventListener('click', toLR(1), false);
prev.addEventListener('click', toLR(-1), false);
没测试，不过思路是这样。
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题