顯示測驗的下一個按鈕

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>