Выберите 4 предмета с помощью jquery - PullRequest
Новая
       22

Выберите 4 предмета с помощью jquery

1 голос
/ 30 мая 2011

Я читал о подключаемом плагине Jquery UI, мой вопрос:

Могу ли я ограничить выбор только 4 пунктами в списке?Или, может быть, было бы проще закодировать его без использования выбираемого плагина?

Спасибо!

РЕДАКТИРОВАТЬ: Спасибо за ваши ответы, однако я вижу, что я не очень хорошо объяснил это:пользователь может выбрать (Ctrl + клик) более одного элемента в списке с помощью выбираемого плагина пользовательского интерфейса Jquery.Я хочу ограничить его, чтобы пользователи могли выбирать только до 4 элементов (любой из них).

Ответы [ 4 ]

4 голосов
/ 31 мая 2011

Это можно легко сделать, обработав событие выбора селектируемого пользовательского интерфейса jQuery.

Выбираемый плагин добавляет ui-selecting классы во время операции выбора.Когда операция выбора завершается (т. Е. Вы отпускаете левую кнопку мыши), она превращает все элементы ui-selecting в ui-selected.Кроме этого, внутри ничего не хранится информация об элементах, которые должны быть выбраны.

Это облегчает нашу работу, когда каждый элемент превращается в состояние ui-selecting, происходит событие selecting.Там мы можем подсчитать общее количество элементов .ui-selecting и .ui-selected, и если оно превышает допустимый предел, просто удалите класс ui-selecting из текущего элемента.

Это решение работает на всех выбранныхоперации, один клик, Ctrl Multi Select и даже выделение ограничивающего прямоугольника. 

$('ul').selectable({
    selecting: function(event,ui){
        // With the current item selected, are we over 4 items (the allowed maximum)?
        if($(this).find('.ui-selecting,.ui-selected').length > 4)
            // If yes, just remove it from the current selection
            $(ui.selecting).removeClass('ui-selecting');
    }
});

Демо: http://jsfiddle.net/Vbbfs/

3 голосов
/ 30 мая 2011

JSFIDDLE DEMO

Посмотрите на демо!
И вот как этого добиться: 

$('ul.list li').click(function() {
    $(this).toggleClass('selected');

    if ($('.selected').length > 4) {
        $(this).toggleClass('selected');
        alert('You have already selected 4 items!\nYou can undo a selection.');
    }
});

приписка

  • Таким образом, вы можете переключать уже выбранный элементы для выбора нового!
  • The \n внутри кода просто для новой строки внутри окна предупреждения;) ;)
1 голос
/ 30 мая 2011

Это должно быть сделано методом :lt(index).

, например, $('li:lt(4)') выберет все элементы списка с индексом меньше 4. И так как индекс основан на нуле, будут выбраны первые 4 элемента.

1 голос
/ 30 мая 2011

Вы ищете селектор : lt () .

$('ul li:lt(4)') выбирает 4 первых <li> элементов в списке.

Пример: http://jsfiddle.net/vjbzr/

...