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选择，但我没有看到id div的.tutorial。但是，您可以简单地使用next jQuery函数来获取当前div的nextSibling。你还必须确保最初没有.hidden类的至少一个div。

E.g。

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

您需要从按钮中删除ID，而是使用类并更改单击绑定的选择器。 由@koala_dev提供。

Answer 2

您可以使用{/ 1}}和prev()等功能

next()

单击按钮时不会更改

2 个答案: