确认对话框未显示重复文本值的技术问题排查

• 开发游戏物品展示网站，物品市场名称从第三方API获取，每个物品对应一个含市场名称的div，存在多个div文本重复的正常场景
• 支持点击div高亮选中，点击「Confirm」按钮弹出确认框展示选中物品名称
• 当前问题：选中多个文本重复的div时，确认对话框完全不显示这些重复的文本值

核心问题出在选中逻辑依赖文本值去重：

• 点击重复文本的div时，selectedSkins.indexOf(marketName)只会找到第一个匹配项的索引
• 第二次点击同文本的div时，会直接删除数组里的第一个匹配项，而非记录新增的选中状态
• 最终导致重复选中的同文本物品，在数组里的数量无法正确累积，统计时自然无法显示重复计数

放弃用文本值作为选中判断的唯一依据，改用每个div的唯一标识或直接跟踪DOM元素来记录选中状态，以下是两种可行方案：

方案1：基于物品唯一ID跟踪（推荐） #

如果API返回物品的唯一ID，生成div时给每个.market-name元素添加data-item-id属性，用ID跟踪选中状态：

$(document).ready(function() {
    var selectedItemIds = [];

    $('.market-names').on('click', '.market-name', function() {
        $(this).toggleClass('highlighted');
        var itemId = $(this).data('item-id');
        var index = selectedItemIds.indexOf(itemId);
        
        if (index === -1) {
            selectedItemIds.push(itemId);
        } else {
            selectedItemIds.splice(index, 1);
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedItemIds.length > 0) {
            // 建立ID到文本的映射
            var itemMap = {};
            $('.market-name').each(function() {
                var id = $(this).data('item-id');
                itemMap[id] = $(this).text();
            });

            // 统计每个物品名称的选中次数
            var itemCounts = {};
            selectedItemIds.forEach(function(id) {
                var name = itemMap[id];
                itemCounts[name] = (itemCounts[name] || 0) + 1;
            });

            var confirmationContent = "<h3>确认选中物品</h3>";
            confirmationContent += "<ul>";

            Object.keys(itemCounts).forEach(function(name) {
                if (itemCounts[name] > 1) {
                    confirmationContent += "<li>" + name + " (x" + itemCounts[name] + ")</li>";
                } else {
                    confirmationContent += "<li>" + 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();
            });
        }
    });
});

方案2：直接跟踪DOM元素 #

如果无法获取物品唯一ID，可直接跟踪选中的DOM元素本身：

$(document).ready(function() {
    var selectedElements = [];

    $('.market-names').on('click', '.market-name', function() {
        var $el = $(this);
        $el.toggleClass('highlighted');
        
        var index = selectedElements.indexOf($el[0]);
        if (index === -1) {
            selectedElements.push($el[0]);
        } else {
            selectedElements.splice(index, 1);
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedElements.length > 0) {
            var itemCounts = {};
            selectedElements.forEach(function(el) {
                var name = $(el).text();
                itemCounts[name] = (itemCounts[name] || 0) + 1;
            });

            var confirmationContent = "<h3>确认选中物品</h3>";
            confirmationContent += "<ul>";

            Object.keys(itemCounts).forEach(function(name) {
                if (itemCounts[name] > 1) {
                    confirmationContent += "<li>" + name + " (x" + itemCounts[name] + ")</li>";
                } else {
                    confirmationContent += "<li>" + 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();
            });
        }
    });
});

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