尝试在两个图标之间切换

Question

我启动两个按钮（我使用的是 CSS themeroller 中内置的 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);