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 （将鼠标悬停在图标上以查看班级名称）

在jQuery UI中切换按钮图标

1 个答案: