试图在两个图标之间切换

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 option功能更改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);