切換jQuery UI中的按鈕圖標

Question

我正在使用jQuery UI按鈕及其圖標。我想的onclick切換按鈕的圖標，其工作但圖標覆蓋：

/* initialize the button at document.ready event */ 
$("#buttonid"). button({ icons: { primary: 'ui-icon-play'} }); 

/* binding event */ 
$("#buttonid").toggle(
function() { 
    /* code */ 
    $(this).button({ icons: { primary: 'ui-icon-play'} }); }, 
function() { 
    /* code */ 
    $(this).button({ icons: { primary: 'ui-icon-pause'} }); 
}); 

有人能指出問題所在？

Answer 1

您可以通過更改與其關聯的類來更改圖標，不需要額外的交互。

看到這個working Fiddle的例子！

jQuery的

$(function() { 
    $("#buttonid").button({ 
     icons: { 
      primary: "ui-icon-play" 
     } 
    }).hover(function() { 
     // hover in 
     $(".ui-button-icon-primary", this) 
      .toggleClass("ui-icon-pause ui-icon-play"); 
    }, function() { 
     // hover out 
     $(".ui-button-icon-primary", this) 
      .toggleClass("ui-icon-play ui-icon-pause"); 
    }); 
}); 

因爲你所需要的僅僅是改變圖標，該圖標出現在樣式表的特定類，你只需要切換上了班上/從而改變：

.ui-icon-play到.ui-icon-pause，反之亦然。

參見：jQuery toggleClass

參見：jQuery UI icon classes（懸停在圖標，查看類名）