如何为同类元素点击事件添加属性值并在指定容器复用？

没问题，这个需求用jQuery就能轻松搞定，我给你两种场景下的实现代码，你可以根据自己的实际情况选：

静态元素场景（页面加载时就存在所有productbox） #

直接给每个.productbox里的图片绑定点击事件，点击时克隆当前图片并添加到目标容器：

// 绑定点击事件
$('.productbox img').on('click', function() {
    // 克隆当前点击的图片元素（保留原有的所有属性）
    const targetImg = $(this).clone();
    // 将克隆后的图片追加到.differentcontainer容器末尾
    $('.differentcontainer').append(targetImg);

    // 如果你需要**替换**容器内的现有内容（而不是追加），就把上面的append换成html：
    // $('.differentcontainer').html(targetImg);
});

动态元素场景（productbox是后续通过JS/AJAX加载的） #

如果你的产品盒子是动态生成的，直接绑定事件会失效，这时候要用事件委托来处理：

// 事件委托：把事件绑定在父级（这里用document作为兜底）
$(document).on('click', '.productbox img', function() {
    const targetImg = $(this).clone();
    $('.differentcontainer').append(targetImg);
    // 替换内容的话同样用html()
});

关键说明 #

• $(this)指代的就是当前被点击的那张图片，克隆它能完整保留原图片的src、alt等所有属性，比手动拼接<img src="...">更可靠
• append()是往容器末尾添加新元素，html()会清空容器原有内容再添加，根据你的需求二选一就行

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