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 jQuery函數來獲取當前div的nextSibling 。 您還必須確保至少有一個div最初沒有.hidden類。

例如

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

您需要從按鈕中刪除ID，而是使用一個類並更改單擊綁定的選擇器。 由@koala_dev建議 。

Answer 2

您可以使用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");
    });