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