解决JavaScript中重复选择项的确认对话框显示问题

var selectedSkins = [];

$('.market-name').on('click', function() {
    var marketName = $(this).text();
    var index = selectedSkins.indexOf(marketName);
    if (index === -1) {
        selectedSkins.push(marketName); // 如果不存在，添加
    } else {
        selectedSkins.splice(index, 1); // 如果存在，移除
    }
    // UI高亮逻辑（此处省略，但通常会与此数据逻辑耦合）
});

$('#confirm-button').on('click', function() {
    // 此时 selectedSkins 不会包含重复项，甚至可能因重复点击而为空
    // 后续的计数逻辑也无法正确处理
    // ... 生成确认对话框 ...
});

<script>
$(document).ready(function() {
    // 使用对象数组来存储选中的项目，每个对象包含名称和计数
    var selectedSkins = [];

    // 监听所有具有 'market-name' 类的 div 的点击事件
    $('.market-names').on('click', '.market-name', function() {
        // 切换高亮样式（UI反馈）
        $(this).toggleClass('highlighted');
        var marketName = $(this).text(); // 获取被点击项目的文本名称

        // 查找 selectedSkins 数组中是否已存在同名项目
        var index = selectedSkins.findIndex(function(skin) {
            return skin.name === marketName;
        });

        // 根据查找结果更新 selectedSkins 数组
        if (index === -1) {
            // 如果未找到同名项目，则将其作为新项目添加到数组中，计数为1
            selectedSkins.push({ name: marketName, count: 1 });
        } else {
            // 如果找到同名项目，则增加其计数
            selectedSkins[index].count++;
        }
        // 注意：此处toggleClass会每次点击都切换高亮，
        // 如果需要高亮与selectedSkins中的count保持一致，
        // 则需要更复杂的UI状态管理逻辑。
        // 例如：只有当count > 0 时才高亮，当count减到0时移除高亮。
    });

    // 监听确认按钮的点击事件
    $('#confirm-button').on('click', function() {
        // 只有当有项目被选中时才显示确认对话框
        if (selectedSkins.length > 0) {
            var confirmationContent = "<h3>确认信息</h3>";
            confirmationContent += "<ul>";

            // 遍历 selectedSkins 数组，构建确认对话框的内容
            selectedSkins.forEach(function(skin) {
                // 如果项目计数大于1，则显示名称和计数
                if (skin.count > 1) {
                    confirmationContent += "<li>" + skin.name + " (x" + skin.count + ")" + "</li>";
                } else {
                    // 否则只显示名称
                    confirmationContent += "<li>" + skin.name + "</li>";
                }
            });

            confirmationContent += "</ul>";
            confirmationContent += "<button id='close-button'>关闭</button>";

            // 创建并显示确认对话框
            var confirmationDialog = $('<div>').addClass('confirmation-dialog').html(confirmationContent);
            $('body').append(confirmationDialog);

            // 为关闭按钮绑定点击事件，点击后移除对话框
            $('#close-button').on('click', function() {
                confirmationDialog.remove();
            });
        }
    });
});
</script>