javascript - 如何通过单击下一步按钮从列表中显示同一类的div？-6ren

javascript - 如何通过单击下一步按钮从列表中显示同一类的div？

转载作者：行者123 更新时间：2023-12-03 05:03:37

我的列表中有未答复的 div 类。如果我单击“下一步”按钮，它应该隐藏当前 div 并转到下一个 div。

这里我有 8 个 div。 3、5、7、8 级有未答题。如果我单击“3”div 中的下一个按钮。它应该切换到“5”div。剩余的“3,7,8”应该不显示。我需要如何自定义它？

$(document).ready(function() {
  $('ul.tabs').tabs();
});

.quiz-container h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

 .quiz-container .box{
  padding: 10px 15px;
}
.quiz-container .box label{
	cursor:pointer;
}
.quiz-container .question {
  background-color: #170092;
  margin-bottom: 25px;
  font-size: 115%;
  color:#fff;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}
.quiz-container .question:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 35px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #170092;
}
.quiz-container .question span.question_number_quiz {
  background-color:#170092;
  color: white;
  display: block;
  float: left;
  margin-left: -15px;
  margin-top: -10px;
  margin-right: 0px;
  padding: 10px 10px;
  text-align: center;
  text-transform: uppercase;
  width: 40px;
}
.quiz-container .answers {
  padding-left: 0;
  list-style-type: none;
}
.quiz-container .answers .answer {
  background-color: #fff;
  color: #727272;
  border:1px solid #eee;
  margin-bottom: 10px;
  position: relative;
}
.quiz-container .answers .answer:hover, .quiz-container .answers .answer.active {
  cursor: pointer;
  color: #170092;
  border:1px solid #170092;
}
.quiz-container .answers .answer:hover span:not([class^="checkmark"]), .quiz-container .answers .answer.active span:not([class^="checkmark"]) {
  background-color: #170092;
}
.quiz-container .answers .answer.active span.checkmark {
  background-color: #fff;
  position: absolute;
  top: 8px;
  right: 20px;
  font-size: 120%;
}
.quiz-container .answers .answer span:not([class^="checkmark"]) {
  background-color: #727272;
  color: white;
  display: block;
  float: left;
  margin-left: -15px;
  margin-top: -10px;
  margin-right: 20px;
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  width: 40px;
}
.quiz-container button {
  background-color: #cb2127;
  color: #fff;
  font-size: 110%;
  border: 0;
  width: 100%;
  position: relative;
}
.quiz-container button:hover {
  background-color: #2ecc71;
  cursor: pointer;
}
.quiz-container button span {
  font-size: 200%;
  position: absolute;
  top: -3px;
  right: 10px;
}

.quiz-container{
	width:65%;
	margin:0 auto 39px;
}
.tabs .tab.completed_que a{
	color:#fff;
	background-color:#009933;
}
.tabs .tab.missedque a{
	color:#fff;
	background-color:#A50303;
}
.questiontabs .tab a.active{
   background-color: #fcfcfc;
    color: #212121;
	border:none !important;
 }
 .questiontabs .tab{
 	height: 30px;
    line-height: 29px;
 }
  .questiontabs .tab a{padding:0 10px;color:#212121; border-radius:4px;}
.questiontabs a.active{
	border:none !important;
}

.questiontabs{
	background:none;
	 margin-top:-27px;
}

.quiz-container .indicator{
	display:none !important;
}
.icon{
	  border-radius: 2px;
    display: inline-block;
    height: 10px;
    margin-right: 10px;
    vertical-align: middle;
    width: 10px;
}
.active .icon{
	background:#fcfcfc none repeat scroll 0 0;
    border:1px solid #ddd;
}
.attempted .icon{
	background:#009933 none repeat scroll 0 0;
    border-color: #009933;
}
.not-attempted .icon{
	background:#A50303 none repeat scroll 0 0;
    border-color: #A50303;
}
.test_status li{
	display:inline-block;
	margin-right:10px;
}
.questiontabs_test{
	visibility:hidden;
}
.questiontabs .completed_que.disabled a{
	opacity:0.4;
}
.questiontabs .completed_que.disabled a:hover{
	cursor:not-allowed;
	color:#fff;
}
.questiontabs .completed_que.disabled .active{
	background-color:#009933;
	color:#fff;
}
.question_images img{
	display:inline-block;vertical-align:top;
}
.question_action_form p{
	margin:0px;
}
.instructions li{
	list-style:inside;
}
.instructions ol li{
	list-style-type:decimal;
	line-height:35px;
}
.instructions p{
	font-size:13px;
	margin-bottom:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="quiz-container">
               		<p>Question 1 of 5</p>
                     <div class="question1 questions" id="questions1">
                         <div class="question box">
                            <p><span>1.</span> Which one of the five is least like the other four ?</p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span>Shark</p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span>Deer</p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> Cow</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> Dog</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          	<input type="submit" class="btn red waves-effect" value="Skip" id="next_1">
                            <input type="submit" class="btn red waves-effect" value="Submit" id="submit_1">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question2 questions" id="questions2">
                         <div class="question box">
                            <p><span>2.</span> Which number should come next in the series ?   1 - 1 - 2 - 3 - 5 - 8 - 13</p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span>8</p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span>21</p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> 26</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> 31</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          	<input type="submit" class="btn black waves-effect" value="Previous" id="back_1">
                          	<input type="submit" class="btn red waves-effect" value="Skip" id="next_2" onClick="next()">
                             <input type="submit" class="btn red waves-effect" value="Submit" id="submit_2">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question3 questions unanswered_que" id="questions3">
                         <div class="question box">
                            <p><span>3.</span> If you rearrange the letters "ANICH", you would have the name of a/an: </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span>Country</p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span>Ocean</p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> State</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> City</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          	<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question4 questions" id="questions4">
                         <div class="question box">
                            <p><span>4.</span> I'm a male. If Albert's son is my son's father, what is the relationship between Albert and me? </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span>he is my brother</p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span>he is my uncle</p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> he is my father</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> he is my sister</p>
                            </li>
                          </ul>
                     </div>
                     <div class="question5 questions unanswered_que" id="questions5">
                         <div class="question box">
                            <p><span>5.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span> A famous scientist </p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span> A pop princess </p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> A football player</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> A baseball player</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          	<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question6 questions" id="questions6">
                         <div class="question box">
                            <p><span>6.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span> A famous scientist </p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span> A pop princess </p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> A football player</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> A baseball player</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          		<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question7 questions unanswered_que" id="questions7">
                         <div class="question box">
                            <p><span>7.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span> A famous scientist </p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span> A pop princess </p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> A football player</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> A baseball player</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          		<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                     <div class="question8 questions unanswered_que" id="questions8">
                         <div class="question box">
                            <p><span>8.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
                          </div>
                         <ul class="answers">
                            <li class="answer box">
                              <p><span>a</span> A famous scientist </p>
                            </li>
                            <li class="answer box">
                              <p><span>b</span> A pop princess </p>
                            </li>
                            <li class="answer box">
                              <p><span>c</span> A football player</p>
                            </li>
                            <li class="answer box">
                              <p><span>d</span> A baseball player</p>
                            </li>
                          </ul>
                          <div class="aligncenter control_sec  pull-right">
                          		<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
                            <div class="clearfix"></div>
                          </div>
                     </div>
                       <div class="row MT20">
                        <div class="col s12">
                          <ul class="tabs questiontabs">
                            <li class="tab completed_que disabled"><a href="#questions1">1</a></li>
                            <li class="tab completed_que disabled"><a href="#questions2">2</a></li>
                            <li class="tab missedque"><a class="active" href="#questions3">3</a></li>
                            <li class="tab completed_que disabled"><a href="#questions4">4</a></li>
                            <li class="tab missedque"><a href="#questions5">5</a></li>
                             <li class="tab completed_que disabled"><a href="#questions6">6</a></li>
                              <li class="tab missedque"><a href="#questions7">7</a></li>
                               <li class="tab missedque"><a href="#questions8">8</a></li>
                          </ul>
                        </div>
            		  </div>
                      <div class="aligncenter test_status">
                      	<ul>
                        	<li class="active"><span class="icon"></span>Active Question</li>
                            <li class="attempted"><span class="icon"></span>Attempted</li>
                            <li class="not-attempted"><span class="icon"></span>Not attempted</li>
                        </ul>
                      </div>
               </div>

最佳答案

在您的 HTML 通行证中 this作为参数 i next()功能..像这样..

<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next(this)">

然后使用这个代码..这应该可以工作。

function next(_this){
    var _el = $(_this).parents('div.active');
    var _id = $(_this).attr('id');
    $(_el).removeClass('active');
    $(_el).css('display','none');
    $(_el).closest('div').nextAll('.unanswered_que').eq(0).css('display','block').addClass('active');
    $('li.tab').removeClass('active');
    $('[href="#' + _id + '"]').addClass('active');
}

Note: You will still have to manipulate this further as per your requirement

关于javascript - 如何通过单击下一步按钮从列表中显示同一类的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42104672/

文章推荐： javascript - 如何在之间添加空格

文章推荐： javascript - 我如何知道应该在 NodeJS 中使用哪些参数

文章推荐： javascript - 当输入字段为空时，jQuery 验证不起作用

文章推荐： javascript - 为什么 javascript 数组会被键值填充

Python 这段代码做了什么？列表=列表[列表!=值]
如标题所示，ans_list是一个答案列表，ans_index是一个数字(答案在词汇表中的索引，但与atm无关) 这里生成的 tree.anslist 是什么？ (例如，仅针对第一个)，忽略迭代。 f
MySQL 列表 IN 列表
我目前将用户的输入存储在逗号分隔的列表中，如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项，然后用逗号连接起来 1,2,5 然后 MySQ
MySQL 列表 IN 列表
我目前将用户的输入存储在逗号分隔的列表中，如下所示: Userid | Options 1 | 1,2,5 用户在一个数组形式中勾选一组选项，然后用逗号连接起来 1,2,5 然后 MySQ
list - 我怎样才能完全展平一个列表(列表(列表)......)
我想知道如何完全展平列表和包含它们的东西。除其他外，我想出了一个解决方案，它可以将具有多个元素的东西滑倒并将它们放回原处，或者在滑倒后将具有一个元素的东西拿走。这与 How do I “flatte
list - 我怎样才能完全展平一个列表(列表(列表)......)
我想知道如何完全展平列表和包含它们的东西。除其他外，我想出了一个解决方案，它可以将具有多个元素的东西滑倒并将它们放回原处，或者在滑倒后将带有一个元素的东西拿走。这与 How do I “flatte
java - 列表<列表<字符串>>到字符串[][]
这个问题已经有答案了: Convert nested list to 2d array (3 个回答) 已关闭 7 年前。 java中有没有快捷方式可以转换 List> 到 String[][] ？
java - 列表<列表<对象>>排序
我在排序时遇到问题 List> 。我创建了一个自定义比较器，在其中编写了对数据进行排序的代码。 public class CustomComparator implements Comparator
java - 列表数组列表转换
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Java Generics: Cannot cast List to List? 我只是想知道为什么下面的java代
c# - 列表<逗号分隔的字符串> => 列表<字符串>?
试图想出一个 LINQy 方法来做到这一点，但我什么也没想到。我有一个对象列表<>，其中包含一个属性，该属性是逗号分隔的字母代码列表: lst[0].codes = "AA,BB,DD" lst[1
python - 列表 += 元组与列表 = 列表 + 元组
假设我有这些任务: points = [] point = (1, 2) 我怎么会这样做: points += point 它工作得很好，并且给了我点 = [1, 2]。但是，如果我这样做: poin
scala - 将列表[任务[列表[A]]]转换为任务[列表[A]]
如何在 scala 中将 List[Task[List[Header]]] 类型转换为 Task[List[Header]]。我有一个方法返回 Task[List[Header]] 并多次调用 do
java - 如何在Java中获取二维列表的元素？例如，列表<列表<整数>>
如何在 Java 中查找二维列表的元素？我有一个参数为 List> 的函数我想知道如何找到这个列表的行和列。最佳答案如果你喜欢 List> obj 然后你就可以像这样访问 obj.get(cur
java - 列表<列表没有按预期工作
分配 List到 List工作正常。分配 List>到 List>不编译。代码 public class Main { public static void main(String[] a
java - 列表<可序列化> vs 列表
我正在用 Java 编写一个方法，该方法必须接收并迭代 Serializable 的 List。有什么区别: public void myMethod(List list) { } 和 public
java - 通知网格/列表/树内网格/列表/树的更改
我看到很多人想用 mvvm 更新网格/列表/树的一部分，但他们不想刷新整个列表。对于所有遇到此问题的人，我做了以下示例。希望这对你有用。最佳答案这是一个简单的例子。整个代码中最重要的是: Bi
C++ 列表到 Python 列表
我正在为现有的 C++ 库编写包装器，该库使用列表，其中 T 是自定义结构。我被建议使用 vector 而不是列表，但我试图避免修改库。为了更好地理解这个场景，我做了一个简单的应用程序，使用一个列表
java - 列表 VS 列表<基础>
List list List list 这两种声明有什么区别吗？谢谢，最佳答案是的。 List可以包含所有派生自 Base 的不同事物的混合物. List包含同质项(从某种意义上说，它们必须全部
Java 泛型 : List, 列表<对象>、列表
有人可以尽可能详细地解释以下类型之间的区别吗？ List List List 让我更具体一点。我什么时候想使用 // 1 public void CanYouGiveMeAnAnswer(List l
python - 是否有任何 python 模块可以计算(列表，列表)元组的频率？
我有一个元组列表，每个元组都是一对列表。所以我的数据看起来像: mylist = [(['foo', 'bar'], ['bar', 'bar']),(['bar', 'bar'],['bar', '
list - 给定一个 (a * b) 列表，返回一个 (a * b list) 列表
也许是一个时髦的标题，但我遇到了以下问题: 给定一个类型为 (a * b) list 的列表，我想创建一个类型为 (a * b list) list 的新列表。一个例子: 给定列表 let testL

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何通过单击下一步按钮从列表中显示同一类的div？