クイズの次のボタンが表示されます

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. ：このような次の1をブロックあなたはそれを認識すべき最後のものに答えます、ここを見てください。

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

Answer 2

その既にdisplayのスタイルにタイプミスがありますworking-。以下 参照スニペット：

$('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>