添加到收藏夹 div 功能未按预期运行

Question

我正在为我们现场的报告服务器创建一个仪表板页面。它只是报告链接及其简短描述的集合。我认为允许用户通过选中报告旁边的框来将他们喜欢的报告集合保存在页面顶部的 div 中会很好。我有一个 js 文件，用于处理本地存储中收藏夹的存储，并在页面加载时更新收藏夹 div，或者当用户单击复选框添加它或我捏造的 X 按钮将其删除时。第一个代码块是页面主体的一部分的快照。第二个是js文件。我看到的问题是是否已经选中了一个复选框，并且我选中了第二个复选框。它似乎添加了错误的 p 元素，尽管当我取消选择某些复选框时它会自行解决。任何有关这种奇怪现象的帮助将不胜感激！

<h2>Report Server Dashboard<a href="https://www.freecounterstat.com" title="free website counter"><img src="https://counter6.optistats.ovh/private/freecounterstat.php?c=c4af1t599kzkrhdd7yl7z7qx81nnwrcq" border="0" title="website counter" alt="website counter" style="float:right;"></a></h2>
<div class="ng-binding">
<div class="innerdiv" style="padding-left: 8px; padding-right: 18px; float:left;">
<a style="text-decoration: none" href="/Reports/report/ReportsRun" title="Click here to run a report showing your last 30 days of reports." target="_blank">My last 30 days of reports</a>
</div>
<div class="innerdiv" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<a style="text-decoration: none" href="mailto:[email protected]?subject=Report%20Server%20report%20or%20customization%20request" title="Click here to start an email to the IT department.">***These are all custom reports displaying information pulled from the live Visual database. If you need a report created or modified please reach out to the IT department***</a>
</div>
<div class="innerdiv" id="expander" style="float: inline-start; padding-left: 18px; padding-right: 18px;">
<span id="spanner" style="text-decoration: none; cursor: pointer;" title="Click to open all sections"></span>
</div>
</div>
<br>
<!--MY FAVORITES-->
<button class="collapsible_nobutton"><strong>MY FAVORITES</strong> - This section contains reports where you've checked the "Add to MY FAVORITES" checkbox.</button>
<div  id="favorites">
    <p><br></p>
</div>

<br>
<!--INFO REPORTS-->
<button class="collapsible"><strong>INFO REPORTS</strong> - General information reports that don't fall under another specific category</button>
<div class="content">
    <p class="paragraph" data-id="1"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="1"><a href="/Reports/report/INFO%20REPORTS/Customer%20List" target="_blank">CUSTOMER LIST</a>
     - This report provides a listing of customers with address and contact information. It shows customers with a Last Order Date both in the date range you select and customers with no Last Order Date.</p>
    <p class="paragraph" data-id="2"><input type="checkbox" title="Add to MY FAVORITES section" class="favorite-checkbox" data-id="2"><a href="/Reports/report/INFO%20REPORTS/CUSTOMERS" target="_blank">CUSTOMERS</a>
     - This report provides a listing of customers with address and contact information. It has a filterable drop down containing customer names. It also shows the Last Order Date.</p>
</div>

脚本.js

    // Load favorites from local storage on page load
    var favorites = JSON.parse(localStorage.getItem('newfavorites')) || [];

    // Update the favorites div
    updateFavoritesDiv(favorites);

    // Handle checkbox clicks
    $('.favorite-checkbox').on('change', function() {
        var index = $(this).index('.favorite-checkbox');
        var isChecked = $(this).is(':checked');

        if (isChecked) {
            favorites.push(index);
        } else {
            favorites = favorites.filter(function(i) {
                return i !== index;
            });
        }

        // Update local storage and the favorites div
        localStorage.setItem('newfavorites', JSON.stringify(favorites));
        updateFavoritesDiv(favorites);
    });



function updateFavoritesDiv(favorites) {
        $('#favorites').empty();
        favorites.forEach(function(index) {
            var $p = $('p').eq(index).clone();
            // Remove the checkbox from the cloned paragraph
            $p.find('.favorite-checkbox').remove();
            var $removeBtn = $('<button class="button" title="Remove from MY FAVORITES section">X</button><span style="width:12px; display: inline-block;"></span>');
            $removeBtn.click(function() {
                // Remove the paragraph from favorites and update the display
                favorites = favorites.filter(function(i) {
                    return i !== index;
                });
                localStorage.setItem('newfavorites', JSON.stringify(favorites));
                updateFavoritesDiv(favorites);
            });
            $p.prepend($removeBtn);
            $('#favorites').append($p);
        });
    }
    
});

Answer 1

您的 $('p') 选择器 (

var $p = $('p').eq(index).clone();

) 检索所有

<p>

标签，包括已添加到收藏夹的项目，这样，如果您将“客户列表”添加到收藏夹，则下次

updateFavoritesDiv()

是称为，有一个用于收藏夹客户列表的

<p>

，以及用于信息报告部分的

<p>

标签，因此索引不断变化。

由于您只想克隆“信息报告”部分中的项目，因此更具体的选择器

$(div.content p)

将仅检索“信息报告”部分中的项目，并且不会尝试克隆已添加到的项目最喜欢的。

简而言之，将

var $p = $('p').eq(index).clone();

更改为

var $p = $('div.content p').eq(index).clone();

以消除已添加到收藏夹的克隆项目。