Div按鈕點擊不變

Question

我創建了一個網頁，其中有一些大的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> 

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類。

E.g.

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

您需要從您的按鈕中刪除id，而是使用類並更改您的選擇器以進行點擊綁定。 正如@koala_dev所示。

Answer 2

您可以像使用

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