2

いくつかの大きなdivs を含む Web ページを作成しました。

そのページにボタンがあります。そのボタンをクリックすると、現在の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");
4

2 に答える 2

2

で選択しようとしていますが、 dividには何も表示されません。ただし、jQuery 関数を使用して現在の div を取得することもできます。また、最初にクラスのない div が少なくとも 1 つあることを確認する必要があります。id.tutorialnextnextSibling.hidden

例えば

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

ボタンから id を削除し、代わりにクラスを使用して、クリック バインディングのセレクターを変更する必要があります。@koala_dev によって提案されたとおり。

于 2013-08-18T19:59:53.437 に答える
-1

次のような機能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");
    });
于 2013-08-18T20:02:26.003 に答える