Question

我已经拼凑了很多（感谢Stack Overflowers）：

我有一系列产品模块，每个模块都包含产品名称和复选框。选中复选框会将相应的产品名称添加到页面上其他位置的列表中，取消选中复选框会从列表中删除相应的产品名称。当用户提交“比较”按钮时，我需要jQuery来检查选择的数量，确认最少两个和任意最大值。

我的问题：以下jQuery显然未能考虑已删除的项目（通过取消选中）。例如，如果我选中一个复选框，然后取消选中它 - 它确实被取消选中，并且确实从列表中删除了 - 然后重新检查它，jQuery报告有2个要比较的项目。

<div class="product-module">
<div class="product-pic">
    <div class="checkbox-wrapper">
        <label for="compare1">
            <input type="checkbox" class="checkbox" name="compare" id="compare1" />
            Compare
        </label>
    </div>
</div>

<div class="product-info">
    <p><a href="#" title="#"><span class="product-name">Product Name here</span></a></p>    
</div>
</div>


<div class="compare">
<ul>
</ul>
<p class="compare-button"><button type="submit">Compare</button></p>
<p class="clear-selections"><a class="button" id="clear-selections" href="#">Clear Selections</a></p>
</div>

脚本：

// clear all checkboxes on load
$(function(){
    $('input[type="checkbox"]').attr('checked', false);
});


    $(function(){
    $('.column-main input[type="checkbox"]').click(function()    {
        var title = $(this).closest('.product-module').find('.product-name').html();

        // if user checks the checkbox, add the item to the ul
        if    ($(this).attr('checked'))    {
        var html = '<li><a href="'+title+'">' + title + '</a></li>';
        $('.compare ul').append(html);

        // if user un-checks the checkbox, remove the item from the ul
        }    else if ($(this).attr('checked', false))    {
        $('li a[href="' + title + '"]').remove();
        }
    })
})


$(function(){
    $('.clear-selections').click(function(){
        $('.compare ul').empty();
        $('input[type="checkbox"]').attr('checked', false);
    })
});

    $(function(){
    $('.compare button').click(function(){
        minRequests = 2;
        maxRequests = 3;
        requested = $('.compare ul li').size();    // go figure: why not .length()?

        if(requested < 2)    {
        alert ('Compare ' + requested + ' products?');

        } else if((requested >= 2) && (requested <= 5 ))    {
        alert ('There are ' + requested + ' products to compare');

        } else {
        alert (requested + ' is too many');
        }
    });
});

Answer 1

问题在于：

$('li a[href$="' + title + '"]').remove();

您正在删除'li'中的'a'标记，但保留'li' - 这是您稍后计算的内容。

尝试：

$('li a[href$="' + title + '"]').parent().remove();

jQuery错误地计算元素

1 个答案: