jQuery切换体类？

Question

我正在尝试构建一个简单的列表，当您单击一个按钮时，它会将一个类添加到正文以进行样式设置，即单击它将它添加到正文类中，然后我可以设置样式。

但是，如果单击u.s，它会从body类中删除uk并在us类中添加，依此类推，因此对于任何单击都是第四位。如果单击也会自行删除，因此返回原始状态。

我可以让一个人切换，但其他人似乎被忽略了。

$( "#country-id" ).click(function() {
 $( '#country-code' ).toggleClass( "uk" );
 $( '#country-code' ).toggleClass( "us" );
 $( '#country-code' ).toggleClass( "aus" );
 $( '#country-code' ).toggleClass( "nz" );
});

我这里有Fiddle，有人介意帮忙吗？

Answer 1

喜欢这个吗？

JSFiddle：http://jsfiddle.net/APAKL/3/

$("#country-id > li").click(function() {
    $('#country-code').toggleClass( $(this).attr('id') );
});

或更短的：

$("#country-id > li").click(function() {
    $('#country-code').toggleClass(this.id);
});

这是针对LI（不是列表）上的click事件。它获取被点击的LI的id并使用它的id属性作为要添加的类。

如果您一次只需要一个：

你可能想要清除它们并添加一个：

JSFiddle：http://jsfiddle.net/APAKL/4/

$( "#country-id > li" ).click(function() {
    $( '#country-code' ).removeClass('uk us aus nz');
    $( '#country-code' ).addClass( $(this).attr('id') );
});

减少到：

$( "#country-id > li" ).click(function() {
    $( '#country-code' ).removeClass('uk us aus nz').addClass( $(this).attr('id') );
});

甚至是：

$( "#country-id > li" ).click(function() {
    $( '#country-code' ).removeClass('uk us aus nz').addClass(this.id);
});