jQuery表演/隐藏麻烦

我正在构建此prev/下一个选项以显示另一个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打开，单击Next（#tb1 HID和#tb2打开），再次单击下一步，什么也不会发生。

divs #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>

问题是，您使用的多个id s具有相同名称next和back。这不是有效的HTML，并且浏览器最有可能选择他找到的第一个元素。因此，当您单击第二个 next -button时，永远不会触发eventhandler。如果要解决类似的元素，请改用class -Attribute：

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

新选择器：

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

您的ID不能超过一个元素。

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

至少定义三倍。尝试替换ID =" back"和id =" next"，class =" back"和class =" next"

只需测试您的cur号，如果它低于tbpages.length，则显示您的元素。

if ( cur < tbpages.length ) {
   $(tbpages[cur]).show();
}

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

这可以是因为该页面渲染具有相同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>

<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" />

相关内容

最新更新

热门标签：