点击元素时获取父元素下图片src并追加的jQuery问题排查

原代码存在的三个核心问题： #

• 类选择器语法错误：.closest('.customers-otziv__content .items')中的空格表示后代关系，但目标父元素是同时拥有customers-otziv__content和items两个类的元素，应该改为无空格的复合选择器.closest('.customers-otziv__content.items')。
• 图片类名拼写错误：原HTML中图片的类是reviews__photo（双下划线），代码里误写为.reviews-photo（单横线），导致无法匹配所有图片。
• Map遍历对象错误：原代码对父容器元素做map，再用find().prop('src')只会取容器内第一张图片的src，正确逻辑应该直接遍历父容器下的所有图片元素。

修正后的完整代码 #

// 绑定点击事件（可根据实际点击目标调整选择器，比如图片或图片容器）
$(document).on('click', '.customers-otziv__photo, .reviews__photo', function() {
    // 1. 定位到最近的目标父容器
    const targetParent = $(this).closest('.customers-otziv__content.items');
    // 2. 获取该容器下所有图片的src及原ID
    const photoList = targetParent.find('.reviews__photo').map((index, el) => ({
        src: $(el).prop('src'),
        originalId: $(el).data('id')
    })).get();

    // 清空目标容器（可选，避免多次点击重复追加）
    $('.listblock-otziv').empty();
    // 3. 将图片批量追加到目标容器
    photoList.forEach((item, i) => {
        $('.listblock-otziv').append(`
            <div class="listblock-otziv__content" data-id="${item.originalId || i}">
                <img class="listblock-otziv__photo" src="${item.src}">
            </div>
        `);
    });
});

关键修改说明： #

1. 修正父容器选择器，确保精准定位到包含当前点击元素的目标父块。
2. 直接遍历父容器下的所有reviews__photo元素，通过map生成完整的图片数据列表。
3. 增加empty()方法（可选），解决多次点击时重复追加图片的问题。
4. 保留原图片的data-id，让追加元素的ID更贴合原始数据逻辑。

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