0

アイコン付きの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'} }); 
});

誰でも問題を指摘できますか？

4

1 に答える 1

3

関連付けられているクラスを変更することでアイコンを変更できます。追加の操作は必要ありません。

この実用的なフィドルの例を見てください!

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 アイコン クラス (アイコンにカーソルを合わせると、クラス名が表示されます)

于 2012-06-05T17:52:53.440 に答える