Question

我正在使用prev和next按钮。如果我一直点击它似乎就会破碎。我只是想要点击后面或下一个按钮，它不会中断。

＆＃13;

 div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    border: 1px black solid;
    padding: 3px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p><button id ="1">Next</button></p>  <p><button id="2">Back</button></p> 
<div id="start">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<div id="startPrev">div6</div>

＆＃13;

{{1}}

＆＃13;

Answer 1

我或许在这里有点过分了。我没有将当前div保留在变量中，而是将当前元素的 index 保存在变量中，这样更容易使用。我将所有div放在父元素（#parent）中，这样我们就可以轻松选择我们关心的div使用选择器＆＃34;＃parent＆gt; div＆＃34;。

＆＃13;

var currIndex = 0; // start at the first element
showCurrentDiv();

// hide all divs, then show only the current one
function showCurrentDiv() {
    // hide all divs inside #parent
    $("#parent>div").hide();
    // of all divs inside #parent, show the nth div, where n=currIndex
    $("#parent>div:eq("+currIndex+")").show(); 
}

$("#1").click(function() {
    // if current div is not the very last div...
    if (currIndex < $("#parent>div").length - 1) {
        currIndex++; // ...then traverse to the next div
    }
    showCurrentDiv(); // update which divs are shown/hidden
});

$("#2").click(function() {
    // if current div is not the very first div...
    if (currIndex > 0) {
        currIndex--; // ...then traverse to the previous div
    }
    showCurrentDiv(); // update which divs are shown/hidden
});

＆＃13;

 #parent>div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    border: 1px black solid;
    padding: 3px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p><button id ="1">Next</button></p>  <p><button id="2">Back</button></p> 
<div id="parent">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
</div>

＆＃13;

通常答案不应该只重写代码，但我希望我至少能彻底解释我所做的一切。我使用：eq（）选择器来指定我想要显示的div，记录为here;基本上它选择与选择器匹配的第n个元素。

Answer 2

我认为这会为你做到：

var $currDiv = $("#start");
$("div").hide();
$currDiv.css("background", "red");
$("#1").click(function() {
    $currDiv = $currDiv.next();
    if ($currDiv.length) {
        $("div").hide();
        $currDiv.show();
    }
    else
    {
        currDiv = $("#startPrev");
    }

});



var $currDiv2 = $("#startPrev");
$("div").hide();
$currDiv2.css("background", "red");
$("#2").click(function() {
    $currDiv2 = $currDiv2.prev();
    if ($currDiv2.length) {
        $("div").hide();
        $currDiv2.show();
    }
    else
    {
        $currDiv2 = $("#start");
    }

});

jquery遍历框消失

2 个答案: