javascript - 如何在列表 css 类之间进行选择

Question

我有一个带有下一个和上一个按钮的div

<div class="b1"></div>
<input type="button" class="btnP" value="Prev"/>
<input type="button" class="btnN" value="Next"/>

和一个CSS类列表

.b1 { background-color:#fff;}
.b2 { background-color:#000;}
.b3 { background-color:#123;}
.b4 { background-color:#444;}
.b5 { background-color:#bbb;}

当用户按该编号顺序按下下一个或上一个按钮时，我想将其用于那个div。

This is what i did so far: http://jsfiddle.net/51dq5num/

var size_ini = 1;
$(".btnN").click(function () { 
    var size_increase = size_ini++;
    var size_increase1 = size_ini;
    $("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);
    if (size_increase > 4) {
        size_ini = 1;
    }
});

我设法让下一个按钮工作，但我不确定如何为上一个按钮做这件事

有没有比在 div 中添加和删除 css 类更好的方法？

Answer 1

试试这个:

$(".btnP").click(function () {
        var size_increase = $("#content").attr("class").substring(2, 1);
        size_increase--;
        if (size_increase < 1) {
            size_increase = 5;
        }
        $("#content").html("<span>" + size_increase + "</span>").removeClass().addClass("b" + size_increase);       
    });

jsFiddle:http://jsfiddle.net/51dq5num/7/