Question

感谢几位Stack Overflow参与者提供的宝贵帮助，我非常接近理想的结果......这是一个回顾和更新，感兴趣的各方：

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

为了简洁起见（！），我会放弃发布这两个版本，因为我在两者中都遇到了类似的怪异。这是我最近的一次争吵 - 非常感谢您的任何见解。

<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方法。

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

2 个答案: