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 。

这是我到目前为止所做的： 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/

Answer 2

您可以这样做：

var newClass = function(div, next) {
    div[0].className = div[0].className.replace(/b\d+/, "b" + newClass[next ? 'next' : 'prev']());
};
newClass.atual = 1;
newClass.last = 5;
newClass.next = function(){
    this.atual = (this.atual == this.last ? 1 : this.atual + 1);
    return this.atual;
};
newClass.prev = function(){
    this.atual = (this.atual == 1 ? this.last : this.atual - 1);
    return this.atual;
};


var myDiv = $("#content");
$(".btnN").click(function () { 
    newClass(myDiv, true);
});
$(".btnP").click(function () { 
    newClass(myDiv, false);
});

Jsfiddle here.

Answer 3

这是两个按钮的组合解决方案。

var size_ini = 0;
$("input[type='button']").click(function () { 
    if($(this).hasClass("btnN"))
    {
        size_ini=size_ini+1;
        var c="b"+size_ini;
        $("#content").removeClass().addClass(c).html("TG"+size_ini);
    }
    else
    {
         size_ini=size_ini-1;
         var c="b"+size_ini;
         $("#content").removeClass().addClass(c).html("TG"+size_ini);
    }
});

注意，因为没有提到我没有检查最大条件因此btnP可以无限地增加计数器。你可以将它放在一个condn中并将其限制为最大值。

Answer 4

http://jsfiddle.net/n8dLgh3L/1/

这是增加和减少的js代码。

Sub test4String2color()
    Dim strTest As String, cell As Range
    Dim strLen As Long, p As Long

    With ActiveSheet
        strTest = .Range("F1")
        strLen = Len(strTest)
        For Each cell In Intersect(.Range("A1:D100"), .UsedRange)
            p = InStr(1, cell, strTest)
            Do While CBool(p)
               cell.Characters(p, strLen).Font.Color = vbRed
                p = InStr(p + 1, cell, strTest)
            Loop
        Next
    End With
End Sub

Answer 5

您可以在.substr（）的帮助下实现此目的，以增加类的数量。看看。

    function Getnumber(classNumber,nav)
    {
        var no=0;
        if(nav=="P")
        {
            no=parseInt(classNumber.substr(1,2))-1;
        }
        else
        {
            no=parseInt(classNumber.substr(1,2))+1;
        }
        return no;
    }

    $(".btnN").on("click",function(){
      var oldClass=$('div').attr("class");
      var num=Getnumber(oldClass,"N");
      if(num<6)
        $('div').addClass("b"+num).removeClass(oldClass);
    });
   $(".btnP").on("click",function(){
      var oldClass=$('div').attr("class");
      var num=Getnumber(oldClass,"P");
      if(num>0)
        $('div').addClass("b"+num).removeClass(oldClass);
   });

随意问。

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

5 个答案: