本教程旨在解决Web应用中，当用户选择多个具有相同文本内容的元素时，确认对话框无法正确显示所有重复项的问题。通过优化前端数据结构，将简单的字符串数组升级为包含名称和计数信息的对象数组，并相应地调整点击事件处理逻辑和确认对话框的生成方式，确保所有选中项（包括重复项）都能准确无误地呈现给用户。

在构建交互式Web应用时，我们经常需要允许用户选择列表中的项目，并在最终提交前通过确认对话框展示这些选中项。一个常见但容易被忽视的问题是，当用户选择多个具有相同文本内容的项时，确认对话框可能无法正确地显示这些重复项，而是将它们合并为单个条目。本教程将深入探讨这一问题，并提供一个基于jQuery的健壮解决方案。

问题分析：原始实现的数据管理缺陷

假设我们有一个商品列表，用户可以点击商品名称将其高亮选中，然后点击“确认”按钮查看所有选中项。原始的实现逻辑可能存在以下问题：

1. 数据结构选择不当： 用于存储选中项的数组（例如 selectedSkins）可能只存储了项目的文本名称字符串。当用户选中“商品A”两次时，数组中只会有一个“商品A”。
2. 去重逻辑的误用： 在处理点击事件时，开发者可能使用了 indexOf 或类似方法来检查项目是否已在数组中。如果存在，则将其从数组中移除（模拟切换），如果不存在，则添加。这种方法天然地对数组进行了去重，导致 selectedSkins 始终只包含唯一的项目名称。
3. 确认对话框基于去重数据： 最终生成确认对话框时，无论如何遍历或计数，都只能基于这个已经去重的数据源，从而无法显示重复项。

以下是原始问题代码中可能存在的简化逻辑示例，它导致了上述问题：

// 原始问题代码片段（简化）
$(document).ready(function() {
    var selectedSkins = []; // 存储字符串，天然去重

    $('.market-names').on('click', '.market-name', function() {
        $(this).toggleClass('highlighted');
        var marketName = $(this).text();

        // 此处逻辑导致 selectedSkins 数组始终只包含唯一值
        var index = selectedSkins.indexOf(marketName);
        if (index === -1) {
            selectedSkins.push(marketName); // 如果不存在，添加
        } else {
            selectedSkins.splice(index, 1); // 如果存在，移除（去重效果）
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedSkins.length > 0) {
            var itemCounts = {};
            // 即使这里尝试计数，也是基于已经去重了的 selectedSkins
            selectedSkins.forEach(function(skin) {
                itemCounts[skin] = (itemCounts[skin] || 0) + 1;
            });

            var confirmationContent = "
确认
";
            Object.keys(itemCounts).forEach(function(skin) {
                // 因为 selectedSkins 已经去重，itemCounts 中的每个 skin 对应的 count 永远是 1
                confirmationContent += "
" + skin + "
";
            });
            confirmationContent += "
关闭";

            // ... 显示对话框 ...
        }
    });
});

在上述原始逻辑中，selectedSkins 数组在任何时候都只会包含用户点击过的 不同 项目名称。因此，即使后续的 itemCounts 逻辑尝试统计，它也只能统计到每个唯一名称出现了一次，从而无法显示重复项。

解决方案：优化数据结构与交互逻辑

要正确处理并显示重复的选中项，核心在于改变我们存储选中项的数据结构，并相应地调整点击事件和确认对话框的生成逻辑。

1. 核心思路：使用对象数组存储计数

我们将 selectedSkins 数组从存储简单的字符串改为存储对象。每个对象将包含两个属性：

• name: 项目的文本名称。
• count: 该项目被选中的次数。

例如，如果用户选中“商品A”两次，“商品B”一次，selectedSkins 数组可能看起来像这样：[{ name: '商品A', count: 2 }, { name: '商品B', count: 1 }]。

2. 修改点击事件处理 (.market-name)

当用户点击一个 .market-name 元素时，我们需要根据其高亮状态（选中或取消选中）来更新 selectedSkins 数组：

• 切换高亮状态： 首先，使用 toggleClass('highlighted') 来更新UI样式。
• 获取项目名称： 获取被点击元素的文本内容作为 marketName。
• 查找现有条目： 使用 findIndex 方法在 selectedSkins 数组中查找是否存在 name 与 marketName 匹配的对象。
• 处理选中逻辑：
  • 如果元素现在是 高亮状态 (即被选中)：
    • 如果 selectedSkins 中已存在该项目（index !== -1），则将其 count 属性递增。
    • 如果不存在（index === -1），则向 selectedSkins 数组中添加一个新的 { name: marketName, count: 1 } 对象。
• 处理取消选中逻辑：
  • 如果元素现在是 非高亮状态 (即被取消选中)：
    • 如果 selectedSkins 中存在该项目（index !== -1），则将其 count 属性递减。
    • 如果递减后 count 变为 0 或更小，说明该项目已完全取消选中，应从 selectedSkins 数组中移除该对象。

3. 修改确认对话框生成 (#confirm-button)

当用户点击“确认”按钮时，生成对话框的逻辑将变得非常直接：

• 遍历 selectedSkins 数组中的每个对象。
• 对于每个对象，根据其 count 属性的值来生成显示文本。如果 count 大于1，则显示 (xN) 后缀，否则只显示名称。
• 将生成的文本添加到确认对话框的内容中。

完整代码实现

以下是整合了上述改进的完整 jQuery 脚本示例：

    
    
    
    
    



    
选择您的商品

    
        商品A
        商品B
        商品A
        商品C
        商品B
        商品D
    

    确认选择