Question

我建立这个上一个/下一个选项来展示另一个div，但我正在解决一些奇怪的问题。

$(document).ready(function(){
    var cur = 0;
    var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
    //tb.volgende
    $("#next").click(function(){
        $(tbpages[cur]).hide();
        cur = cur + 1;
        $(tbpages[cur]).show();
    });
    //tb.vorige
    $("#back").click(function(){
        $(tbpages[cur]).hide();
        cur = cur - 1;
        $(tbpages[cur]).show();
    });
});

现在会发生什么：首先打开#tb1，然后点击下一步（#tb1隐藏并打开#tb2），再次点击下一步，没有任何反应。

div #tb1-4全部相同（除了内容）。

HTML：

<div id="tb1" class="praatwolk">
    <h2>Ik ben Theo</h2>
    <p>text</p>
    <center><button id="next">Volgende</button></center>
</div>
<div id="tb2" class="praatwolk" style="display: none;">
    <h2>Aanleiding/relevantie</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>
<div id="tb3" class="praatwolk" style="display: none;">
    <h2>Wat is het theoretisch kader</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>
<div id="tb4" class="praatwolk" style="display: none;">
    <h2>Bediening van de MOOC</h2>
    <p>text</p>
    <center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</div>

Answer 1

问题是，您正在使用同名id和next的多个back。这不是有效的HTML，浏览器最有可能选择他找到的第一个元素。因此，当您单击第二个next - 按钮时，永远不会触发eventHandler。如果您想要解决类似的元素，请使用class - 属性：

<button class="next">Volgende</button>
<button class="prev">Vorige</button>

新选择器：

$(".next").click(function(){});
$(".back").click(function(){});

Answer 2

只需测试tbpages.length号，如果它低于if ( cur < tbpages.length ) { $(tbpages[cur]).show(); }，则会显示元素。

WebView

演示：http://jsfiddle.net/qkccgruz/

Answer 3

您不能拥有多个具有相同ID的元素。

<center><button id="back">Vorige</button><button id="next">Volgende</button></center>

至少定义了三次。尝试使用class =“back”和class =“next”

替换id =“back”和id =“next”

Answer 4

这可能是因为页面呈现多个具有相同ID的按钮。我对你的代码进行了一些修改，现在工作正常。

<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var cur = 0;
    if(cur==0)
    $("#back").hide();
    else
    $("#back").show();

    var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
    //tb.volgende
    $("#next").click(function(){
$(tbpages[cur]).hide();
cur = cur + 1;    
if(cur==0)
    $("#back").hide();
    else
    $("#back").show();


        $(tbpages[cur]).show();
    });
    //tb.vorige
    $("#back").click(function(){
$(tbpages[cur]).hide();
 cur = cur - 1;
    if(cur==0)
    $("#back").hide();
    else
    $("#back").show();


        $(tbpages[cur]).show();
    });
});
</script>
</head>
<body>

<div id="tb1" class="praatwolk">
        <h2>Ik ben Theo</h2>
        <p>text</p>

</div>
<div id="tb2" class="praatwolk" style="display: none;">
    <h2>Aanleiding/relevantie</h2>
    <p>text</p>

</div>
<div id="tb3" class="praatwolk" style="display: none;">
    <h2>Wat is het theoretisch kader</h2>
    <p>text</p>

</div>
<div id="tb4" class="praatwolk" style="display: none;">
    <h2>Bediening van de MOOC</h2>
    <p>text</p>
</div>
<center><button id="back">Vorige</button><button id="next">Volgende</button></center>
</body>
</html>

Answer 5

<html>


 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function () {
        var cur = 0;
        var tbpages = ["#tb1", "#tb2", "#tb3", "#tb4"];
        //tb.volgende
        $("#next").click(function () {
            $(tbpages[cur]).hide();
            cur = cur + 1;
            $(tbpages[cur]).show();
        });
        //tb.vorige
        $("#back").click(function () {
            $(tbpages[cur]).hide();
            cur = cur - 1;
            $(tbpages[cur]).show();
        });
    });
</script>

<div id="tb1">1</div>
<div id="tb2" style="display:none">2</div>
<div id="tb3" style="display:none">3</div>
<div id="tb4" style="display:none">4</div>
<input type="button" id="next" value="Next" />
<input type="button" id="back" value="Back" />

jQuery显示/隐藏麻烦

5 个答案: