Question

我有一个导航仪。当文档准备就绪时，我将一个班级设置为访问过的下一个孩子。之后，当我点击下一个按钮时，我想从当前的li中删除名为notvisityet的类，并将其添加到下一个孩子。此外，我想将访问过的班级添加到该孩子的李。我在下面写了但它无法正常工作。

这是我的片段：

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
	$(".visited").next().addClass('visited');
	$(".visited").next().children('em').removeClass('notvisityet');
});

.visited{ color:red}
.notvisityet{ color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

Answer 1

我对您的代码进行了一些更改。希望它有所帮助：

＆＃13;

$(document).ready(function(e) {
    $(".visited").next().addClass('notvisityet');
    $('#next').click(function() {
        $(".visited:last").next().removeClass('notvisityet');
        $(".visited:last").next().addClass('visited').next().addClass("notvisityet");
    });
});

＆＃13;

.visited{ color:red}
.notvisityet{ color:blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

＆＃13;

Answer 2

你提出的问题，我做了必要的修改。希望以下代码有帮助

$('#next').click(function(){
    elem=$(".visited")
    elem.next().addClass('visited');
    elem.removeClass('visited');
    elem.next().children('em').removeClass('notvisityet');
    elem.next().next().children('em').addClass('notvisityet');

});

Answer 3

您需要在脚本中更改次要代码：

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
	$(".visited").next().addClass('visited').prev().removeClass('visited');
  $(".visited").children().removeClass('notvisityet');
  $(".visited").next().children().addClass('notvisityet');	
});

.visited{ color:red}
.notvisityet{ color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol>
          <li class="visited">one</li>
          <li><em>two</em></li>
          <li><em>tree</em></li>
          <li><em>four</em></li>
          
</ol>	


<div id="next"> next</div>

您还可以查看此Fiddle

Answer 4

试试这个：

$('#next').click(function(){
  if($('#id1').hasClass('visited')==true){
    $("#id1").removeClass("visited");
    $('#id2').addClass("visited");
  }else if($('#id2').hasClass('visited')==true){
   $("#id2").removeClass("visited");
   $('#id3').addClass("visited");
  }else if($('#id3').hasClass('visited')==true){
   $("#id3").removeClass("visited");
   $('#id4').addClass("visited");
  }else if($('#id4').hasClass('visited')==true){
   $("#id4").removeClass("visited");
   $('#id1').addClass("visited");
  }
});


<ol>
      <li><em id="id1">one</li>
      <li><em id="id2">two</em></li>
      <li><em id="id3">tree</em></li>
      <li><em id="id4">four</em></li>
</ol>

Answer 5

请在jsfiddle中查看下面提到的演示

<强> Demo

像这样改变你的代码

$(document).ready(function(e) {
$(".visited").next().children('em').addClass('notvisityet');
});

$('#next').click(function(){
    $(".visited").next().addClass('visited');

  if(!$('ol li:last-child').prev().hasClass('visited')){
    $(".visited").children('em').removeClass('notvisityet');
    $(".visited").nextAll().eq(1) .children('em').addClass('notvisityet');
  }
  else if($('ol li:last-child').hasClass('visited')){
    $('ol li:last-child').children('em').removeClass('notvisityet');
  }
    else{
    $(".visited").children('em').removeClass('notvisityet');
    $('ol li:last-child').children('em').addClass('notvisityet');
  }
});

如何从当前删除一个类并将其添加到下一个

5 个答案: