javascript - 试图在两个图标之间切换

Question

我启动了两个按钮（我使用的是内置在 CSS 主题中的 JQuery）：

$( ".upArrow" ).button({ icons: {secondary:'ui-icon-circle-arrow-n'} });
$( ".downArrow" ).button({ icons: {secondary:'ui-icon-circle-arrow-s'} });

我希望能够在单击同一个按钮时在这两个图标之间切换，并以某种方式在 .upArrow 类和 .downArrow 类之间切换。我不确定如何。我会很感激任何帮助。

Answer 1

由于您使用的是 jQuery UI 按钮，因此您可以使用函数更改icon选项toggle()。

$('#button').toggle(function(){
    $(this).button('option', 'icons', {secondary:'ui-icon-circle-arrow-n'});
}, function(){
    $(this).button('option', 'icons', {secondary:'ui-icon-circle-arrow-s'});
});

Answer 2

您可以使用 jQuery 的.toggleClass()方法。您不一定需要带走其他类，只需使用 CSS 来覆盖其他类的设置：

$('#foo').toggleClass(className, addOrRemove);