divを変更する前と次のボタン

Question

jQueryで次のdivにアクティブなクラスを追加して前のdivから削除したり、前の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です。代わりに「ケース」をclassの値として使用してください。

次divを見つけて、その要素にaddClassを適用し、あなたがremoveClass方法にちょうどチェーンできアクティブクラスを適用します。

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

を@のロリー・mccrossanはコメントで指摘したようにあなたの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

1. あなたは例えばDIV-1、DIV-2を変更したいdivをするカスタムクラスを追加します。ここでは

   を簡素化するスニペットです。

2. アクティブなdivを示すカウンタを追加します。
3. NEXTまたはPREVをクリックすると、このカウンタがインクリメントまたはデクリメントされ、アクティブなクラスがすべてのdivから削除され、div- {counter}クラスのアイテムに追加されます。
4. カウンターはあなたが何であるか、問題の詳細を記述してくださいすることができ、あなたのdivの数、その後大きく、カウンタが1

Answer 4

$('.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"); 
}); 

Answer 5

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