javascript - 两个相似的函数怎么写成一个函数？
本文介绍了javascript - 两个相似的函数怎么写成一个函数？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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>解决方案
可以的，你思路也没错;如果你要传参数，可以这样
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);
没测试，不过思路是这样。这篇关于javascript - 两个相似的函数怎么写成一个函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
