javascript - 单击按钮时 Div 没有改变

Question

我创建了一个网页，其中有一些大的 div。

我在那个页面上有一个按钮。单击该按钮时，我希望当前的 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>

JS:

$(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");
    });


});

删除了 CSS 以缩短问题的长度。 :)

我想要的: 我希望下一个按钮隐藏当前的 div 并调出紧随其后的下一个 div。

我做了什么:

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");

Answer 1

您正在尝试通过 id 选择，但是我没有看到 .tutorial div 的任何 id。但是，您可以简单地使用 next获取当前 div 的 nextSibling 的 jQuery 函数。您还必须确保至少有一个 div 最初没有 .hidden 类。

例如

$('div.tutorial:not(.hidden)').addClass('hidden').next().removeClass('hidden');

您需要从按钮中删除 id，而是使用一个类并更改您的选择器以进行点击绑定(bind)。 根据@koala_dev 的建议。