反应：使用一个 JavaScript 函数来更改和定位多个 ID

Question

我有一个JavaScript函数，可以改变我的滚动托盘的位置和左右移动，这工作得很好。

然而，要在每个滚动托盘上使用这个函数(我有5个)，我需要制作5个不同的slideRight和slidelleft函数(每个都有自己的名字)，我需要在document.getElementById中传递不同的ID。有没有办法只有一个slidelleft和slideRight函数并且那些基于ID的函数可以知道哪个滑块向左或向右?

类似https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple的东西，除了我没有幻灯片显示，而是一个滑动条与图像在一行。

export function slideRight() {
let container = document.getElementById('scroll-tray-1')
sideScroll(container, 'right', 25, 400, 40);
};
export function slideRight() {
let container = document.getElementById('scroll-tray-2')
sideScroll(container, 'left', 25, 400, 40);
};
function sideScroll(element, direction, speed, distance, step) {
let scrollAmount = 0;
var slideTimer = setInterval(function () {
if (direction === 'left') {
element.scrollLeft -= step;
} else {
element.scrollLeft += step;
}
scrollAmount += step;
if (scrollAmount >= distance) {
window.clearInterval(slideTimer);
}
}, speed);
}

我试图遵循W3 Schools的例子，但我无法解决这个问题。

Answer 1

我可以通过在调用函数时传递函数参数来解决这个问题。唯一的区别是，当在React中调用带参数的函数时，我必须像调用箭头函数一样调用它'()=>滑块('scroll-tray'， 'left')'，以使其工作