如何在jQuery onclick中使用函数参数？替换参数为slides元素ID

好的，咱们一步步来解决这个问题，你的代码里有几个小细节需要调整，才能让它正常工作：

首先要避开的坑：var是JavaScript保留关键字 #

你不能把var用作函数参数名，这会直接导致语法错误，先把参数名换成合法的名称，比如slideElement。

两种实现方案，按需选择 #

方案1：调用函数时传入slides元素

这种方式更灵活，函数可以复用在其他元素上：

// 先定义动画需要的变量（必须声明，不然会报错）
const slideStepWidth = 360; // 替换成你实际需要的滑动步长
const animationSpeed = 500; // 动画时长，单位毫秒

// 修正参数名，替换var为合法名称
function slide(slideElement) {
  // 获取元素当前的margin-left值，处理初始值为auto/空的情况
  const currentMargin = parseInt(window.getComputedStyle(slideElement).marginLeft) || 0;
  
  if (currentMargin >= -2160) {
    slideElement.animate(
      { 'margin-left': `-${currentMargin + slideStepWidth}px` },
      animationSpeed
    );
  }
}

// 给slides元素绑定点击事件，调用时传入该元素
document.getElementById('slides').addEventListener('click', function() {
  slide(this);
});

方案2：函数内部直接获取slides元素（无需传参）

如果这个函数只给slides元素用，可以简化成这样：

const slideStepWidth = 360;
const animationSpeed = 500;

function slide() {
  const slideElement = document.getElementById('slides');
  const currentMargin = parseInt(window.getComputedStyle(slideElement).marginLeft) || 0;
  
  if (currentMargin >= -2160) {
    slideElement.animate(
      { 'margin-left': `-${currentMargin + slideStepWidth}px` },
      animationSpeed
    );
  }
}

// 点击时直接调用函数
document.getElementById('slides').addEventListener('click', slide);

额外注意点 #

• 原来代码里的width和animationSpeed没有定义，必须先声明这些变量，不然会抛出ReferenceError。
• 用window.getComputedStyle获取元素的实际样式比直接读style.marginLeft更准确，因为后者只能获取内联样式。
• 推荐用addEventListener绑定事件，比直接写onclick属性更灵活，也更符合现代JavaScript规范。

内容的提问来源于stack exchange，提问作者Ahmed Sayed