Javascript 单击按钮时Div未更改

我创建了一个网页，里面有一些大的

div

s

我在那页上有一个按钮。点击该按钮，我希望当前的

div

发生变化，并打开下一个

div

我已经编写了一些代码，但不幸的是它不起作用：(

HTML:

<div class="tutorial">
    <p class="heading">Tell us about yourself</p>
    <div class="body">
        <table>
            <tr>
                <td>
                    <label for="full_name">What's your full name?</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="full_name" id="full_name" placeholder="Full Name" />
                </td>
            </tr>
            <tr>
                <td>
                    <br/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="about">Describe yourself:</label>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea id="about" name="about" rows="5" cols="40" placeholder="Share you hobbies, interests and more about yourself"></textarea>
                </td>
            </tr>
            <tr>
                <td width="900px" height="60px"></td>
                <td>
                    <button id="next" class="btn">Next</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>

$(function () {
    var tutorials = $("div.tutorial");
    var idNumber = 1;
    tutorials.each(function () {
        $(this).attr("id", idNumber);
        idNumber++;
    });

    var nextButton = $("#next");

    $(nextButton).on('click', function () {
        var currentTutorial = $("div.tutorial").not(".hidden");
        var currentTutorialId = currentTutorial.prop("id");
        currentTutorial.addClass("hidden");
        var nextTutorialId = currentTutorialId++;
        var nextDiv = null;
        if ($("div.tutorial").is("#" + nextTutorialId)) {
            var nextDiv = $("div.tutorial");
        }
        nextDiv.removeClass("hidden");
    });


});

var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId++;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
    var nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");

删除CSS以缩短问题的长度。：）

我想要什么： 我希望“下一步”按钮隐藏当前div，并调出它之后的下一个div

我所做的：

<div class="tutorial">
    <p class="heading">Tell us about yourself</p>
    <div class="body">
        <table>
            <tr>
                <td>
                    <label for="full_name">What's your full name?</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="full_name" id="full_name" placeholder="Full Name" />
                </td>
            </tr>
            <tr>
                <td>
                    <br/>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="about">Describe yourself:</label>
                </td>
            </tr>
            <tr>
                <td>
                    <textarea id="about" name="about" rows="5" cols="40" placeholder="Share you hobbies, interests and more about yourself"></textarea>
                </td>
            </tr>
            <tr>
                <td width="900px" height="60px"></td>
                <td>
                    <button id="next" class="btn">Next</button>
                </td>
            </tr>
        </table>
    </div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>
<div class="tutorial hidden">
    <p class="heading">Tell us about yourself!</p>
    <div class="body">Body</div>
</div>

$(function () {
    var tutorials = $("div.tutorial");
    var idNumber = 1;
    tutorials.each(function () {
        $(this).attr("id", idNumber);
        idNumber++;
    });

    var nextButton = $("#next");

    $(nextButton).on('click', function () {
        var currentTutorial = $("div.tutorial").not(".hidden");
        var currentTutorialId = currentTutorial.prop("id");
        currentTutorial.addClass("hidden");
        var nextTutorialId = currentTutorialId++;
        var nextDiv = null;
        if ($("div.tutorial").is("#" + nextTutorialId)) {
            var nextDiv = $("div.tutorial");
        }
        nextDiv.removeClass("hidden");
    });


});

var currentTutorial = $("div.tutorial").not(".hidden");
var currentTutorialId = currentTutorial.prop("id");
currentTutorial.addClass("hidden");
var nextTutorialId = currentTutorialId++;
var nextDiv = null;
if ($("div.tutorial").is("#" + nextTutorialId)) {
    var nextDiv = $("div.tutorial");
}
nextDiv.removeClass("hidden");

---

您正试图通过

id

进行选择，但是我没有看到

.tutorial

div的

id

。但是，您可以简单地使用jQuery函数获取当前div的

nextSibling

。您还必须确保最初至少有一个div没有

.hidden

类

例如

您需要从按钮中删除id，而是使用一个类并更改click绑定的选择器正如@koala_dev所建议的，您可以使用

prev（）

和

next（）

函数，如

 $(nextButton).on('click', function () {
        var currentTutorial = $("div.tutorial").not(".hidden");
        var currentTutorialId = currentTutorial.prop("id");
        currentTutorial.addClass("hidden");

        currentTutorial.next('div').show();

         nextDiv.removeClass("hidden");
    });

---

没有收到您的问题您是在每个教程部分都有一个下一步按钮还是只有一个按钮？请将下一步按钮保留在

div.tutorial

之外，否则它将在您第一次单击后隐藏。这是一个多么好的干净解决方案！如果我能再投一票，我会把它交给你的！在多次将按钮放在所有div上后，它会断开@MohammadAreebSiddiqui，你能举个例子吗？我不确定我是否理解你所说的“多次在所有div上按下按钮”的意思我的意思是，如果我在所有

div.tutorial

s上添加“下一步”按钮，那么它不会在一次之后更改divtime@MohammadAreebSiddiqui您需要从按钮中删除id，而是使用一个类并更改click Bindings的选择器。谢谢@plalx提供了一个很好的解决方案！