老师，请问我提交的作业这里的修改方法
老师，请问这两个按钮的js有更简洁的书写方式吗？
第一次提交作业之后老师建议把商品区域和精品推荐区域的按钮修改成用两个idx的方式，总觉得这种写法很冗余，但是自己找不到更好的方法。
请问可不可以把idx作为一个参数传进函数里，oul1时传入idx1，oul2时传入idx2，然后最后可以输出idx并且对全局变量里的idx1或者idx2进行修改呢？
我尝试在函数最末尾加入return idx然后赋值给对应的idx1和idx2，但是因为有延时器的存在，一直有bug。
相关代码：
let leftbtn1 = document.getElementById('left-btn1');
let rightbtn1 = document.getElementById('right-btn1');
let leftbtn2 = document.getElementById('left-btn2');
let rightbtn2 = document.getElementById('right-btn2');
let oul1 = document.getElementById('product-list');
let oul2 = document.getElementById('recom');
let idx1 = 0;
let idx2 = 0;
let lock = true;
function rightbtnhandler(target,elewidth,elenum,eleshownum) {
if(target !==oul1){
if(!lock){
return
}
lock=false;
if (idx2<=elenum-eleshownum-1) {
idx2++;
target.style.transform = `translateX(${-elewidth * idx2}px)`;
}
setTimeout(() => {
lock = true;
}, 1000);
} else {
if (!lock) {
return
}
lock = false;
if (idx1 <= elenum - eleshownum - 1) {
idx1++;
target.style.transform = `translateX(${-elewidth * idx1}px)`;
}
setTimeout(() => {
lock = true;
}, 1000);
}
}
function leftbtnhandler(target,elewidth) {
if(target!==oul1){
if (!lock) {
return
}
lock = false;
if (idx2 == 0) {
idx2++
}
idx2--;
target.style.transform = `translateX(${-elewidth * idx2}px)`;
setTimeout(() => {
lock = true;
}, 1000);
} else {
if (!lock) {
return
}
lock = false;
if (idx1 == 0) {
idx1++
}
idx1--;
target.style.transform = `translateX(${-elewidth * idx1}px)`;
setTimeout(() => {
lock = true;
}, 1000);
}
}
rightbtn1.onclick = () => {
rightbtnhandler(oul1, 221, 9, 5);
};
rightbtn2.onclick = () => {
rightbtnhandler(oul2, 368, 9, 3);
};
leftbtn1.onclick = () => {
leftbtnhandler(oul1,221);
};
leftbtn2.onclick = () => {
leftbtnhandler(oul2,368);
};正在回答 回答被采纳积分+1
同学你好，老师参考同学第一次交的作业并且参考同学的疑问，写了一套方案，仅供同学参考：
let leftbtn1 = document.getElementById('left-btn1');
let rightbtn1 = document.getElementById('right-btn1');
let leftbtn2 = document.getElementById('left-btn2');
let rightbtn2 = document.getElementById('right-btn2');
let oul1 = document.getElementById('product-list');
let oul2 = document.getElementById('recom');
let idx = 0;
let lock = true;
// 创建出单独的索引值用于对象保存
let idxObj = {
index: 0,
index2: 0
};
// 判断是作用于oul1还是oul2，讲对应的下标进行赋值，最后返回
function fromIndex(target) {
if (target == oul1) {
idx = idxObj.index;
} else {
idx = idxObj.index2;
}
return idx
}
// 将使用完的idx赋值回去
function toIndex(target, idx) {
if (target == oul1) {
idxObj.index = idx;
} else {
idxObj.index2 = idx;
}
console.log(idxObj)
return idxObj;
}
function rightbtnhandler(target, elewidth, elenum, eleshownum) {
// 先得到是谁的索引
idx = fromIndex(target);
if (!lock) {
return
}
lock = false;
if (idx <= elenum - eleshownum - 1) {
idx++;
target.style.transform = `translateX(${-elewidth * idx}px)`;
// 把索引值给赋值回去
toIndex(target, idx);
}
setTimeout(() => {
lock = true;
}, 1000);
};
function leftbtnhandler(target, elewidth) {
idx = fromIndex(target);
if (!lock) {
return
}
lock = false;
if (idx == 0) {
idx++
}
idx--;
target.style.transform = `translateX(${-elewidth * idx}px)`;
toIndex(target, idx);
setTimeout(() => {
lock = true
}, 1000);
};
rightbtn1.onclick = () => {
rightbtnhandler(oul1, 221, 9, 5);
};
rightbtn2.onclick = () => {
rightbtnhandler(oul2, 368, 9, 3);
};
leftbtn1.onclick = () => {
leftbtnhandler(oul1, 221);
};
leftbtn2.onclick = () => {
leftbtnhandler(oul2, 368);
};
逻辑重点如下：
老师这里创建了一个对象，手动存放了两个下标分别为index与index2，那么创建了一个方法fromIndex，去判断target是oul1还是oul2然后将idx进行赋值。当idx++或--完后，再调用老师创建的toIndex方法判断是oul1还是oul2使用得是谁，将idx赋予回去。
具体使用如下：
这么写的好处就是左右按钮方法基本上不需要在进行改动了。
同学自己试试，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星