jQuery UI按鈕切換

我想從POST操作的回調切換UI按鈕。 jquery UI按鈕或者需要將「ui-icon ui-icon-minus」或「ui-icon ui-icon-checked」作爲span.class來使用。jQuery UI按鈕切換

我試着切換 - 但切換隻刪除並添加回到班級的一部分 - 它不會交換整個班級。這是我在我被困現在：

$('#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的東西。

來源

2010-02-09 Mark Nolan

哦 - 第一，如果將工作 - 而不是第二個！所以根據目前設定的情況，它會以單向方式切換。使用上面的代碼設置，它將從正切換爲負，但不會返回。 – 2010-02-09 03:39:52

真的，你需要的是第二個「else if」，但下面的答案是一個更好的方法:) – 2010-02-09 03:43:44

我會做這樣的：

$('#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'); 
    } 
); 
});

來源

2010-02-09 03:41:27

工程就像一個魅力！謝謝 – 2010-02-09 03:49:57

這應該更接近你想要的。如果您打算再次使用它總是從緩存一個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') 
     } 
     } 
); 
});

來源

2010-02-09 03:39:42

我是新來的整個jQuery的東西 - 但它似乎是你在一些PHP混合？或者我錯了（$符號變量的前面......） – 2010-02-09 03:51:00

@Mark，根本不是。無論何時你返回一個jQuery結果集，通常的做法是將它存儲在一個以'$'開頭的變量中，這樣你就可以將它與平變量（布爾值，字符串）和DOM元素區分開來。然後，在你的應用程序中，你知道'$ varname'可以接受任何jQuery方法（即'$ varname.addClass（）'），但是'myDiv'不能也必須像這樣使用：'$（myDiv）.addClass（） '。希望這是有道理的。另外，這個答案效率更高，因爲它查找'$ page'一次，並查找'$ span'而不是'$（'＃'+ pageID + ...'，它試圖通過ID找到它。 – 2010-02-09 03:59:49

哇 - 謝謝你的偉大的答案！通過這個瞭解了很多... – 2010-02-09 04:19:37

jQuery UI按鈕切換

回答

相關問題