добавление контента в список с помощью флажка - PullRequest
Новая
       12

добавление контента в список с помощью флажка

0 голосов
/ 01 октября 2010

Благодаря неоценимой помощи нескольких участников Stack Overflow, я очень близок к желаемым результатам ... вот резюме и обновление для заинтересованных сторон:

У меня есть серия модулей продукта,каждый из которых содержит (среди прочего) название продукта и флажок «сравнить».Моя цель - создать список выбранных продуктов в другой области страницы, когда флажки установлены.Так как должна быть функция для проверки как минимум двух, и некоторого произвольного максимума - либо как часть функции checkbox .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');
        }
    });
});

Ответы [ 2 ]

2 голосов
/ 01 октября 2010

Вот подход, который я использую: http://jsfiddle.net/ek2zh/ Я не использовал клонирование, потому что узел, который вы хотите вставить, является промежутком, а вы хотите клонировать его в li. Не уверен, что клон автоматически настроит узел по желанию.

0 голосов
/ 01 октября 2010

Я предполагаю, что ваш код клонирует клон .product-name и снова клонирует его. Попробуйте использовать более конкретный путь для нацеливания элемента, который вы клонируете, вместо метода find.

...