помощь по сортируемым спискам в jquery - PullRequest
Новая
       4

помощь по сортируемым спискам в jquery

1 голос
/ 03 апреля 2011

Вот точная копия моего кода: jsFiddleCode

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

Теперь, что яЗдесь я хотел бы выполнить то же поведение, что и при перетаскивании элементов (окно предупреждения появляется и точно говорит (например): «Элемент 6 только что подписан»).

Мое отсутствие понимания состоит в том, как можновозможно, у меня есть ui , доступный при вызове функции subFunction , а не когда я вызываю switchLists . (Я пытался добавить пользовательский интерфейс на вызов switchLists , например: 

switchLists(e, ui){  
  //same code as before...

  //this code doesn't execute
  var itemText= ui.item.text();
  alert(itemText + " just subed");  
}

Но я получаю сообщение об ошибке в FireBug в Firefox о том, что пользовательский интерфейс не определен.

ВыВы можете редактировать код на скрипте и публиковать его здесь в виде ссылки.

В качестве более общих вопросов: как jquery передает переменные другим функциям? Я имею в виду код: 

receive: subFunction

вызывается без аргументов, так как жеПодфункция получает событие и пользовательский интерфейс?Если у вас есть хороший учебник по всем этим вопросам, он будет признателен.

Спасибо за вашу помощь.

1 Ответ

2 голосов
/ 03 апреля 2011

После долгого дня игры с этим я наконец пришел к ответу и сделал это так: jsFiddle link

Короче говоря, я разделил предыдущую функцию на две функции, и я такжепрочитайте немного больше о jQuery и узнайте, что в функции я могу сделать $ (this) и получить доступ к тексту элемента.

ОК, просто для справки весь код здесь: 

$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",          
        receive: subFunction
    });     

    $( "#sortable2" ).sortable({
        connectWith: ".connectedSortable",          
        receive: unsubFunction
    });     

    $(".ui-state-default").dblclick(function() {
        $(this).removeClass().addClass("ui-state-highlight");           

        var litem = $(this).clone();
        litem.appendTo($('#sortable2'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    });

    $(".ui-state-highlight").dblclick(function() {
        $(this).removeClass().addClass("ui-state-default");         

        var litem = $(this).clone();
        litem.appendTo($('#sortable1'));
        $(this).remove();

        $.jGrowl($(this).text() + " successfully subed!", {header:"Subscription Status", life: 1000});          
    });     

    function subFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully subed!", {header:"Subscription Status", life: 1000});
    }

    function unsubFunction(event, ui) {
        ui.item.toggleClass("ui-state-default");
        ui.item.toggleClass("ui-state-highlight");

        $.jGrowl(ui.item.text() + " successfully unsubed!", {header:"Subscription Status", life: 1000});
    }

});
...