如何通过JavaScript的onclick同时传递图片路径、class及data属性

嘿，这个需求很好实现，咱们只需要调整下JavaScript函数的参数逻辑，让它能接收并处理更多属性就行，我给你两种实用的实现方式：

方式一：传递配置对象（更推荐，可读性强） #

把所有需要修改的属性打包成一个对象传递，后续扩展其他属性也更方便。

首先更新你的JavaScript函数：

function changeImg(options) {
  const imghol = document.getElementById("imageHolder");
  // 设置图片主路径
  imghol.src = options.src;
  // 设置class（如果要保留原有class，可改用classList.add替代直接赋值）
  imghol.className = options.className;
  // 设置data-zoom-image自定义属性
  imghol.setAttribute('data-zoom-image', options.zoomImage);
}

然后在触发onclick的缩略图元素里，按对象格式传入所需属性值：

<?php foreach ($thumbs as $thumb) { ?>
  <img 
    src="<?php echo htmlspecialchars($thumb['small_path'], ENT_QUOTES); ?>" 
    onclick="changeImg({
      src: '<?php echo htmlspecialchars($thumb['large_path'], ENT_QUOTES); ?>',
      className: 'zoomE img-responsive',
      zoomImage: '<?php echo htmlspecialchars($thumb['zoom_path'], ENT_QUOTES); ?>'
    })"
    alt="缩略图"
    class="thumb-item"
  >
<?php } ?>

小贴士：用htmlspecialchars是为了避免图片路径里的特殊字符（比如引号）导致JS语法报错，建议加上这个处理。

方式二：传递独立参数 #

如果觉得对象写法繁琐，也可以直接传递多个独立参数：

更新JavaScript函数：

function changeImg(src, className, zoomImage) {
  const imghol = document.getElementById("imageHolder");
  imghol.src = src;
  imghol.className = className;
  imghol.setAttribute('data-zoom-image', zoomImage);
}

触发onclick时按顺序传入参数即可：

<?php foreach ($thumbs as $thumb) { ?>
  <img 
    src="<?php echo htmlspecialchars($thumb['small_path'], ENT_QUOTES); ?>" 
    onclick="changeImg(
      '<?php echo htmlspecialchars($thumb['large_path'], ENT_QUOTES); ?>',
      'zoomE img-responsive',
      '<?php echo htmlspecialchars($thumb['zoom_path'], ENT_QUOTES); ?>'
    )"
    alt="缩略图"
    class="thumb-item"
  >
<?php } ?>

额外小提示 #

• 要是不想完全替换imageHolder的class，而是追加新样式，可以用imghol.classList.add('zoomE', 'img-responsive')，这样不会覆盖原有class。
• 如果你用的是现代JS写法，也可以考虑用事件委托代替内联onclick，代码会更优雅，但上面的方式更贴合你现有的代码结构。

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