Question

正如你可以在标题中看到的，它是关于任何类或ID增加1.例如：我有3个ID，他们调用id1，id2和id3。 id1是可见的，但其他两个是隐藏的。所以现在我想点击一个id1不再可见的按钮，但是对于id2是可见的。在最后一个ID可见后单击下一步后，它必须返回到第一个。我还希望点击另一个按钮，例如id2不再可见，但再次可见id1。

我当前的jQuery代码：

$(document).ready(function() {
    var size_ini = 1;
    var size_increase = size_ini++;        
    $("#next").click(function() {
        $("#id" + size_increase).css("display", "block");
    });
});

我的HTML代码：

<div>
    <p id="id1">first</p>
    <p id="id2" style="display: none;">second</p>
    <p id="id3" style="display: none;">third</p>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

所以我的问题是，我做错了什么或者我还有什么办法做正确的事。

Answer 1

jsfiddle：http://jsfiddle.net/jLm7Q/1/

您应该全局定义size_ini。并为所有对象使用类，以便您可以将它们隐藏在一起。你也可以使用show / hide方法而不是改变css。这个也在1后3和3之后变为1，这将每10秒进行一次。 js代码：

var size_ini = 1;
$(document).ready(function() { 
    var myVar = setInterval('$("#next").click()',10000)  
    $("#next").click(function() {
        clearInterval(myVar);
        setInterval('$("#next").click()',10000)  
        if(size_ini < 3)
        size_ini++;
        else
        size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
    });
    $("#prev").click(function() {
        clearInterval(myVar);
        setInterval('$("#prev").click()',10000)      
        if(size_ini > 1)
        size_ini--;
        else        
        size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
    });    
});

和html：

<div>
    <p class='sample' id="id1">first</p>
    <p class='sample' id="id2" style="display: none;">second</p>
    <p class='sample' id="id3" style="display: none;">third</p>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

Answer 2

$(document).ready(function() {
    setInterval('$("#next").click()', 10000);
    var size = 1;
    $("#next").click(function() {
        $("#id" + size).hide();
        if(size === 3) {
            size = 1;
        }
        else {
            size++;
        }
        $("#id" + size).show();
    });
    $("#prev").click(function() {
        $("#id" + size).hide();
        if(size === 1) {
            size = 3;
        }
        else {
            size--;
        }
        $("#id" + size).show();
    });
});

jQuery添加类名或ID + 1和-1

2 个答案: