JQuery UI Кнопки Переключить - PullRequest
Новая
       20

JQuery UI Кнопки Переключить

1 голос
/ 09 февраля 2010

Я пытаюсь переключить кнопку пользовательского интерфейса из обратного вызова операции POST. Для кнопки пользовательского интерфейса jquery необходимо указать «ui-icon ui-icon-minus» или «ui-icon ui-icon-checked» как span.class

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

$('#toggle-page, a.toggle-page').click(function() {
pageID = $(this).parent('div').attr('id');
$.post(
    "webadmin/pages.toggle.serialize.php", 
    {id : pageID },
    function(data, textStatus, xhr) {
      if ($("#"+pageID+" a#toggle-page span").hasClass('ui-icon ui-icon-minus')) {
            $("#"+pageID+" a#toggle-page span").removeClass('ui-icon ui-icon-minus');
            $("#"+pageID+" a#toggle-page span").addClass('ui-icon ui-icon-check');
          }
      if ($("#"+pageID+" a#toggle-page span").hasClass('ui-icon ui-icon-check')) {
            $("#"+pageID+" a#toggle-page span").removeClass('ui-icon ui-icon-check');
            $("#"+pageID+" a#toggle-page span").addClass('ui-icon ui-icon-minus');
          }
    }
);
});

Я знаю, что приведенный выше код неверен ... но кто-то может указать мне правильное направление? Id и т. Д. Немного вложены, потому что есть несколько записей, которые можно редактировать - отсюда и материал pageID.

Ответы [ 2 ]

1 голос
/ 09 февраля 2010

Я бы сделал это так: 

$('#toggle-page, a.toggle-page').click(function() {
pageID = $(this).parent('div').attr('id');
$.post(
    "webadmin/pages.toggle.serialize.php", 
    {id : pageID },
    function(data, textStatus, xhr) {
      var node = $("#"+pageID+" a#toggle-page span");
      node.toggleClass('ui-icon-minus');
      node.toggleClass('ui-icon-check');
    }
);
});
0 голосов
/ 09 февраля 2010

Это должно быть ближе к тому, что вы хотите. Всегда кэшируйте возврат из селектора jQuery, если вы планируете использовать его снова: 

$('#toggle-page, a.toggle-page').click(function() {
  var  $page = $(this).parent('div'),
      pageID = $page.attr('id');
  $.post(
      "webadmin/pages.toggle.serialize.php", 
      {id : pageID },
      function(data, textStatus, xhr) {
        var $span = $page.find('a#toggle-page span');
        if($span.hasClass('ui-icon-minus')) {
          $span.removeClass('ui-icon-minus').addClass('ui-icon-check')
        } else {
          $span.removeClass('ui-icon-check').addClass('ui-icon-minus')
        }
      }
  );
});
...