显示测验的下一个按钮

Question

我只在用户回答问题时才显示下一个按钮，但在问题未回答时无法隐藏该按钮。

HTML：

<div id="navContent"> 
    <button type="image" class="hide"></button> 
</div> 

JS：

if(this.id==rnd) { 
    $('button.hide').removeClass('hide'); 
} 

和CSS：

.button { 
    position:relative; 
    background-image:url(img/bouton.png); 
    border:none; 
    width:111px; 
    height:202px; 
    color:white; 
} 

.button:hover { 
    background-image:url(img/bouton1.png); 
    width:111px; 
    height:202px; 
} 
.hide { dispaly: none; } 

Answer 1

1. 所有按钮应该得到除第一个display: none;属性。
   

   button { 
   display: none; 
   } 
   

   第一个按钮标签：

   <button style="display: block;"> ... </button> 
   

2. 如果单击该按钮隐藏所有按钮都与显示：阻止下一个这样的：

   $('button').on('click', function(){ 
   $('button').css('display', 'hide'); 
   $(this).next('button').css('display', block'); 
   }); 
   

3. 如果您回答你应该认识的最后一个，请看这里。

   $('button').on('click', function(){   
   if($(this) != $('button').last()){ 
       $('button').css('display', 'hide'); 
       $(this).next('button').css('display', 'block'); 
   } 
   else { 
       // finished quiz 
   } 
   }); 
   

Answer 2

它已经working-没有在样式display一个错字。 下文见片段：在`.hide`类拼错none`：

$('button').click(function(){ 
 
     $(this).addClass('hide'); 
 
    });

.button { 
 
    position: relative; 
 
    background-image: url(http://placehold.it/350x150); 
 
    border: none; 
 
    width: 111px; 
 
    height: 202px; 
 
    color: white; 
 
} 
 
.button:hover { 
 
    background-image: url(http://placehold.it/350x150); 
 
    width: 111px; 
 
    height: 202px; 
 
} 
 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navContent"> 
 
    <button type="image">Hide me!</button> 
 
</div>