用于更改 div 的上一个和下一个按钮

Question

我正在尝试在 jQuery 中创建一个代码，将活动类添加到下一个 div 并将其从前一个 div 中删除，反之亦然。这一切都记住了我想稍后添加的动画。

如果您想查看带有 HTML 和 CSS 的代码： http://codepen.io/salman15/pen/kXVmRG?editors=1010

$(document).ready(function() {
    $('#next').click(function() {
        var location = $(this).parent().parent();
        $('.active').removeClass('active');
        $('div').next('#case').addClass('active');
    });

    $('#prev').click(function() {
        var location = $(this).parent().parent();
        $('.active').removeClass('active');
        $(this).prev('#case').removeClass('active');
    });
});

Answer 1

您不应该为您的div 元素提供相同的id 值：这是无效的HTML。而是使用 "case" 作为 class 值。

要应用 active 类，您可以链接到 removeClass 方法，找到下一个 div，然后应用 addClass元素。

这是一个简化的 sn-p：

$(document).ready(function(){
  $('#next').click(function(){
    if ($('.active').next('.case').length) {
        $('.active').removeClass('active')
                    .next('.case')
                    .addClass('active');
    }
  });
  $('#prev').click(function(){
    if ($('.active').prev('.case').length) {
        $('.active').removeClass('active')
                    .prev('.case')
                    .addClass('active');
    }
  });
});

.active { background: yellow; border: 1px solid }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="next">
  <h1>next</h1>
</div>
<div id="prev">
  <h1>prev</h1>
</div>
<div class="case active">content 1</div>
<div class="case">content 2</div>
<div class="case">content 3</div>

Answer 2

正如@rory-mccrossan 在 cmets 中指出的那样，您的 HTML 和 JS 存在很大缺陷。

这是一个非常简单的例子。

$(function() {
    var nextBtn = $("#next"),
        prevBtn = $("#prev");
  
    nextBtn.on('click', function(e) {
        var active = $(".active");
        var next = active.next('.case');
        if (next.length) {
            active.removeClass('active');
            next.addClass('active');
        }
    });
    prevBtn.on('click', function(e) {
        var active = $(".active");
        var prev = active.prev('.case');
        if (prev.length) {
            active.removeClass('active');
            prev.addClass('active');
        }
    });
});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="case active">One</li>
  <li class="case">Two</li>
  <li class="case">Three</li>
  <li class="case">Four</li>
</ul>
<button id="prev">Prev</button>
<button id="next">Next</button>

next.length 和 prev.length 检查在那里，因此当您到达列表末尾时，它不会超过它。

Answer 3

//file
 $(document).ready(function(){

  $('.d1 li.s1').click(function(){
   $('li').removeClass("active");
  $(this).addClass("active");
  });
  $('ul.ddd li.ggg').click(function(){
    $('li').removeClass("active");
    $(this).addClass("active");
});
 $(".next").click(function(){
 i=1
            var $toHighlight = $('.active').next().length > 0 ? $('.active').next() : $('#MainMenu li.s1').first();
            $('.active').removeClass('active');
            $toHighlight.addClass('active');
            });


         $(".previous").click(function(){
            var $toHighlight = $('.active').prev().length > 0 ? $('.active').prev() : $('ul.mainmenu1 li.s1').last(); 

            $('.active').removeClass('active');
            $toHighlight.addClass('active');
        });
});

Answer 4

1. 向要更改的 div 添加自定义类，例如 div-1、div-2。
2. 添加一个计数器来指示哪个 div 处于活动状态。
3. 点击 NEXT 或 PREV 增加或减少此计数器，从所有 div 中删除活动类并将其添加到具有 div-{counter} 类的项目。
4. 记得在计数器大于 div 数时禁用 NEXT 按钮，当计数器小于 1 时禁用 PREV 按钮。

Answer 5

$('.ggg').click(function(){
   $('.ggg,.sss').removeClass("active");
  $(this).addClass("active");
  $(this).next();
  });

 var x22 = $( "#MainMenu" ).find( ".ggg" ).length;
 //alert(x22);

 var i = 118;
    var hrefa2;
      $(".previous").click(function () {

      hrefa = $( "#MainMenu").find(".ggg").eq(i).attr("alt");
       //hrefa3 = $("#MainMenu").find(".ggg").eq(0);
     i--;
    //alert(hrefa);
     $('.ggg').removeClass("active");
    $( "#MainMenu" ).find( ".ggg" ).eq(i).addClass("active");
 });

  var i = 0;
    var hrefa;
      $(".next").click(function () {

      hrefa = $( "#MainMenu").find(".ggg").eq(i).attr("alt");
      //hrefa1 = $("#MainMenu").find(".ggg").eq(0);
     i++;
    //alert(hrefa);
     $('.ggg').removeClass("active");
    $( "#MainMenu" ).find( ".ggg" ).eq(i).addClass("active");
 });