代码之家 › 专栏 › 技术社区 › aynaz

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

jquery javascript

aynaz · 技术社区 · 9 年前

我有一个领航员。当文档准备好后,我将一个类设置为所访问的下一个子类。之后,当我单击next按钮时,我想从当前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>

5 回复 | 直到 9 年前

SilverSurfer 9 年前

我对你的代码做了一些更改。希望有帮助:

$(document).ready(function(e) {
    $(".visited").next().addClass('notvisityet');
    $('#next').click(function() {
        $(".visited:last").next().removeClass('notvisityet');
        $(".visited:last").next().addClass('visited').next().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>

venkata krishnan 9 年前

对于你提出的问题,我做了必要的修改。希望下面的代码有帮助

$('#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');

});

kravisingh 9 年前

您需要更改脚本中的次要代码:

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

Kannan K 9 年前

试试这个:

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

Heshan Kit 9 年前

请在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');
  }
});