jquery - 在 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

您可以通过更改与其关联的类来更改图标，无需额外的交互。

请参阅这个工作小提琴示例！

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 切换类

参见： jQuery UI 图标类 （悬停图标查看类名）