Gezeigt der nächste Knopf eines Quiz

Question

Ich mache ein Quiz nur, wenn der Benutzer die Frage beantwortet, die nächste Schaltfläche angezeigt, aber ich kann diese Schaltfläche nicht ausblenden, wenn die Frage nicht beantwortet wird.

html:

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

js:

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

und 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. Alle Tasten sollten die display: none; Attribut mit Ausnahme der ersten bekommen.
   

   button { 
   display: none; 
   } 
   

   Erste Taste tag:

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

2. Wenn die Taste ausblenden aller Tasten überhaupt und die Anzeige geklickt wird: Block die nächste wie folgt aus:

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

3. Wenn Sie antworten Sie dem letzten, Sie sollten es erkennen, siehe hier.

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

Answer 2

Seine bereits erwerbsfähigen es ein Tippfehler für display in den Stilen ist. Siehe Snippet unten:

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