добавление / удаление / замена - PullRequest
Новая
       5

добавление / удаление / замена

0 голосов
/ 30 апреля 2011

Я не уверен, что это самый оптимальный способ написания этого кода, но то, что у меня есть почти работает ...

Это то, что я пытаюсь сделать:

(1) Перемещение элемента <li></li> в другое деление при нажатии

(2) Обновление скрытого поля ввода путем добавления или удаления <li id>

Примечание: я не хочу заменять значение в скрытом поле ввода, но добавляю к нему, чтобы вы могли получить значение "u40, u56, u98" ... и т.д ...

Итак, когда пользователь нажимает на элемент <li> с классом addable, он удаляется из родительского элемента <ul> и добавляется к <ul> в другом элементе div.Кроме того, скрытое поле ввода будет обновлено с идентификатором элемента <li>.И наоборот, если пользователь щелкает элемент <li> с классом съемных, происходит обратное ... <li> удаляется из родительского элемента <ul> и добавляется к другому, а скрытое поле ввода обновляетсяудаление идентификатора <li> элемента ...

Это то, что у меня есть до сих пор ... Это работает, когда вы добавляете его, но скрытое поле ввода не удаляет значение, когда вы нажимаете наli.removable элемент.

$('li').click(function() {
    var uID = $(this).attr('id')+',';

    if($(this).hasClass("addable")) {

      $("input#edit-r").val($("input#edit-r").val() + uID);
      $(this).removeClass("addable");
      $(this).addClass("removable");
      $(this).appendTo($("#selections ul"));

    } else {
        var currentValue = $("input#edit-r").val();
        currentValue.replace(uID,"");
        $("input#edit-r").val(currentValue);
        $(this).removeClass("removable");
        $(this).addClass("addable");
        $(this).appendTo($(".filtered ul"));

    }
});

<div class="filtered">
    <ul>
        <li id="u40" class="addable">U40</li>
        <li id="u56" class="addable">U56</li>
        <li id="u98" class="addable">U98</li>   
    </ul>
</div>

<div id="selections">
    <ul>
    </ul>
</div>

<input type="hidden" id="edit-r" value="" />

Ответы [ 2 ]

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

Вместо того, чтобы пытаться обновлять скрытый ввод каждый раз, когда делается выбор, почему бы не обработчику onsubmit позаботиться об этой работе за вас? 

<form onsubmit="GetSelectedListIds()">

И: 

function GetSelectedListIds() {
  var ids = [];
  $("li", "#selections").each(function() {
    ids[ids.length] = $(this).attr("id");
  });
  $("input#edit-r").val(ids.join());
}

Таким образом, вам не нужно беспокоиться о том, что скрытый элемент будет синхронизирован с выбранными элементами.

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

изменение 

currentValue.replace(uID,"");

Для 

currentValue = currentValue.replace(uID,"");

Также для оптимизации вашего кода вы можете использовать цепочку объектов jquery. 

$(this).removeClass("addable").addClass("removable").appendTo("#selections ul");
...