基于JS/jQuery实现模态框动态过滤Gridster组件已存在图片

嘿，这个需求其实很好实现，核心思路就是先获取当前点击的Gridster组件里已有的图片列表，再从所有可选图片中过滤掉这些已存在的，最后渲染剩下的图片到模态框里。下面是具体的实现步骤和代码示例：

1. 点击+按钮时获取当前组件的已选图片 #

当用户点击组件里的+按钮时，我们先定位到当前所在的Gridster组件，然后取出imagenames textarea里的内容，把它转换成数组（这里假设图片地址用逗号分隔，你可以根据实际存储格式调整）：

// 给所有+按钮绑定点击事件
$('.add-image-btn').on('click', function() {
    // 找到当前按钮所在的Gridster组件容器
    const currentWidget = $(this).closest('.gridster-item');
    // 读取textarea里的图片地址，分割成数组并去掉空值
    const existingImages = currentWidget.find('.imagenames').val()
        .split(',') // 如果是换行分隔就改成split('\n')
        .filter(img => img.trim() !== '');
    
    // 把当前组件实例存到模态框的data属性里，方便后续添加时使用
    $('#image-select-modal').data('currentWidget', currentWidget);
    // 渲染模态框里的可选图片
    renderAvailableImages(existingImages);
    // 打开模态框
    $('#image-select-modal').modal('show');
});

2. 过滤并渲染未添加的图片 #

假设你有一个存储所有可选图片的数组allAvailableImages（格式比如['img1.jpg', 'img2.png', ...]），我们过滤掉已经在当前组件里存在的图片，然后动态渲染到模态框的图片容器中：

function renderAvailableImages(existingImages) {
    // 过滤出未被添加的图片
    const availableImages = allAvailableImages.filter(img => {
        // 如果需要忽略大小写匹配，可以改成下面的判断
        // return !existingImages.some(existing => existing.toLowerCase() === img.toLowerCase())
        return !existingImages.includes(img);
    });

    // 清空模态框的图片容器，避免重复渲染
    const imageContainer = $('#modal-image-container');
    imageContainer.empty();

    // 渲染过滤后的可选图片，带复选框供用户选择
    availableImages.forEach(img => {
        const imageOption = $(`
            <div class="image-option">
                <img src="${img}" alt="可选图片" style="width: 100px; height: 100px; object-fit: cover;">
                <input type="checkbox" value="${img}">
            </div>
        `);
        imageContainer.append(imageOption);
    });
}

3. 处理“添加图片”按钮的逻辑 #

当用户在模态框里选中图片并点击“添加图片”时，我们把选中的图片追加到当前组件的imagenames textarea里，同时更新组件内的图片展示：

$('#add-selected-btn').on('click', function() {
    // 从模态框的data里取出之前存的当前组件
    const currentWidget = $('#image-select-modal').data('currentWidget');
    // 读取当前组件已有的图片列表
    let existingImages = currentWidget.find('.imagenames').val()
        .split(',')
        .filter(img => img.trim() !== '');
    // 获取用户选中的图片
    const selectedImages = $('#modal-image-container input:checked')
        .map(function() { return $(this).val(); })
        .get();

    // 合并图片列表并去重，避免重复添加
    const updatedImages = [...new Set([...existingImages, ...selectedImages])];
    // 更新textarea的值
    currentWidget.find('.imagenames').val(updatedImages.join(','));

    // 把选中的图片渲染到当前组件的图片展示区域
    selectedImages.forEach(img => {
        currentWidget.find('.component-images').append(`
            <img src="${img}" alt="已添加图片" style="width: 80px; height: 80px; margin: 5px;">
        `);
    });

    // 关闭模态框
    $('#image-select-modal').modal('hide');
});

一些小细节优化 #

• 如果你的图片地址是用换行或者其他分隔符存储的，记得修改split的参数；
• 如果需要忽略图片地址的大小写匹配（比如Img1.jpg和img1.jpg视为同一张），可以调整过滤时的判断逻辑；
• 可以给模态框的图片选项添加选中样式，提升用户体验。

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