尝试两个图标

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);