显示测验的下一个按钮答案

【问题标题】：Shown the next button of a quiz显示测验的下一个按钮
【发布时间】：2017-09-01 16:00:10
【问题描述】：

我只在用户回答问题时才进行测验

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

【问题讨论】：

你的 display:none .hide 课程拼写错误！

标签： javascript jquery html css image

【解决方案1】：

它已经在工作了 - display 的样式中有错字。见下面的 sn-p：

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

【讨论】：

【解决方案2】：

除第一个按钮外，所有按钮都应获得display: none; 属性。
```
button {
 display: none;
}
```
第一个按钮标签：
```
<button style="display: block;"> ... </button>
```

如果单击按钮，则完全隐藏所有按钮并显示：像这样阻止下一个按钮：

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

如果你回答了最后一个，你应该认出它，看这里。

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

【讨论】：