css 确认对话框不显示重复的文本值

ru9i0ody  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(181)

我正在写一个网站,我显示某些项目(从游戏)。这些商品的市场名称信息从第三方API中检索。下一步是为每个项目创建包含项目市场名称的div。可能有两个或多个div包含相同的文本值,如“Item 1”和“Item 1”。这是非常好的情况。网站还允许突出显示相关项目(点击div)。还有“确认”按钮。点击后,会生成确认对话框,显示突出显示项目的名称。问题是,当有两个div的相同的文本值选定,确认对话框不显示这些重复的文本值在所有。

`<script>
$(document).ready(function() {
    var selectedSkins = [];

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

        // Add or remove the market name from the selected skins array
        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 = {};

            // Count the occurrences of each item name
            selectedSkins.forEach(function(skin) {
                if (itemCounts.hasOwnProperty(skin)) {
                    itemCounts[skin]++;
                } else {
                    itemCounts[skin] = 1;
                }
            });

            var confirmationContent = "<h3>Confirmation</h3>";
            confirmationContent += "<ul>";

            // Iterate over the selected item names
            Object.keys(itemCounts).forEach(function(skin) {
                // Display the item name with the count if it occurs more than once
                if (itemCounts[skin] > 1) {
                    confirmationContent += "<li>" + skin + " (x" + itemCounts[skin] + ")" + "</li>";
                } else {
                    confirmationContent += "<li>" + skin + "</li>";
                }
            });

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

            // Create and display the confirmation dialog
            var confirmationDialog = $('<div>').addClass('confirmation-dialog').html(confirmationContent);
            $('body').append(confirmationDialog);

            // Handle the close button click event
            $('#close-button').on('click', function() {
                confirmationDialog.remove();
            });
        }
    });
});
</script>`
ncgqoxb0

ncgqoxb01#

感谢大家的回答。其实我自己纠正了:

<script>
$(document).ready(function() {
    var selectedSkins = [];

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

        // Check if the market name is already in the selected skins array
        var index = selectedSkins.findIndex(function(skin) {
            return skin.name === marketName;
        });

        if (index === -1) {
            // If the market name is not found, add it to the array with count 1
            selectedSkins.push({ name: marketName, count: 1 });
        } else {
            // If the market name is found, increment its count
            selectedSkins[index].count++;
        }
    });

    $('#confirm-button').on('click', function() {
        if (selectedSkins.length > 0) {
            var confirmationContent = "<h3>Confirmation</h3>";
            confirmationContent += "<ul>";

            // Iterate over the selected skins
            selectedSkins.forEach(function(skin) {
                // Display the skin name with the count if it occurs more than once
                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'>Close</button>";

            // Create and display the confirmation dialog
            var confirmationDialog = $('<div>').addClass('confirmation-dialog').html(confirmationContent);
            $('body').append(confirmationDialog);

            // Handle the close button click event
            $('#close-button').on('click', function() {
                confirmationDialog.remove();
            });
        }
    });
});
</script>

相关问题