使用复选框将内容附加到列表

Question

感谢几位 Stack Overflow 参与者的宝贵帮助，我非常接近期望的结果……对于感兴趣的各方，这里有一个回顾和更新：

我有一系列产品模块，每个模块都包含（除其他外）产品的名称和“比较”复选框。我的目标是在选中复选框时在页面的另一个区域生成选定产品的列表。因为必须有一个函数来检查至少两个和任意最大值 - 要么作为复选框 .click 函数的一部分（根据布莱恩的版本，再次感谢您的宝贵帮助），要么在提交上（我是倾向）。无论哪种情况，列表中的项目数量显然都被错误计算了；选中零个或一个复选框后，我正确地收到了物品不足的警报；但是，如果我取消选中并重新检查几次，我的代码会报告列表中的项目数量不正确。

为了简洁起见（！），我将放弃发布这两个版本，因为我在这两个版本中都遇到了类似的奇怪情况。这是我最新的鹅卵石 - 非常感谢您的任何见解。

<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><br />
    </p>
</div>

<div class="compare">
<ul>
</ul>
<p class="error" style="display: none;">ACK! You've selected more than 4 products to compare.</p>
<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>

<script type="text/javascript">

$(function(){
    $('input[type="checkbox"]').attr('checked', false);
});

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

        // as 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);
        } else {     
        // if user is un-checking the checkbox, remove the item from the ul
        // orig: $('li[title="' + title + '"]').remove();
        $('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 = 4;
        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

这是我采取的方法： http://jsfiddle.net/ek2zh/ 我没有使用克隆，因为您要粘贴的节点是一个跨度，并且您想将其克隆到一个 li 中。不确定克隆是否会根据需要自动调整节点。

Answer 2

我猜您的代码正在克隆 .product-name 克隆并再次克隆它。尝试使用更具体的路径来定位克隆的元素，而不是 find 方法。