次の要素がクリックされた場合は（） - jQueryの

Question

私は私のスライダーコントロール用のHTMLでこのコードがあります。現在設定されているスライドをマークET-PBアクティブ制御のクラスに

<div class="et-pb-controllers"> 

<a href="#" class="">1</a> 
<a href="#" class="">2</a> 
<a href="#" class="">3</a> 
<a href="#" class="">4</a> 
<a href="#" class="">5</a> 
<a href="#" class="et-pb-active-control">6</a> 
<a href="#">7</a><a href="#">8</a> 
<a href="#">9</a><a href="#">10</a> 

</div> 

を。そこで私はカルーセルコントローラを5つ目に見せたいと思っています。

すべての要素の高さは、マージン（スライダコントロールは垂直）です。だから私はコントロールを5つだけのコントロールをもう一度見えるままにして（CSSアニメーションで）コントロールをスライドさせるすべてのコントロールに-95 pxの次のトップ値を追加したい（1-5の代わりに2-6コントロールから）。 jqueryがクラスet-pb-active-controlの要素を取り、次の要素がクリックされたり、2つの要素が次にクリックされたりする方法を見つけることができません。

私は十分明確です。前もって感謝します。

Answer 1

$(document).ready(function(){ 

    $(document).on("click",".et-pb-active-control", function(){ 

    $(this).next().css("background-color", "red"); 

    }); 

}); 

Example

Answer 2

この

var position = 0; \t 
 
\t \t $('.next').click(function(){ 
 
\t \t \t position = parseInt(position) -95; 
 
\t \t \t $('.et-pb-controllers').css("top",position); 
 
\t \t \t console.log('here'); 
 
\t \t }) 
 
\t \t $('.prev').click(function(){ 
 
\t \t \t position = parseInt(position) +95; 
 
\t \t \t $('.et-pb-controllers').css("top",position); 
 
     })

.wrap{ 
 
\t \t \t \t height: 475px; 
 
\t \t \t \t width: 600px; 
 
\t \t \t } 
 
\t \t \t .wrap-controllers{ 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 10%; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t \t overflow: hidden; 
 
\t \t \t \t position: relative; 
 
\t \t \t } 
 
\t \t \t .wrap-controllers a{ 
 
\t \t \t \t height: 95px; 
 
\t \t \t \t display: block; 
 
\t \t \t } 
 
\t \t \t .slider{ 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t width: 89%; 
 
\t \t \t \t background: gray; 
 
\t \t \t \t display: inline-block; 
 
\t \t \t } 
 
\t \t \t .et-pb-controllers{ 
 
\t \t \t \t top: 0; 
 
\t \t \t \t position: absolute; 
 
\t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
\t \t <div class="slider"> 
 
\t \t </div> 
 
\t \t <div class="wrap-controllers"> 
 
\t \t \t <div class="et-pb-controllers"> 
 

 
\t \t \t  <a href="#" class="">1</a> 
 
\t \t \t  <a href="#" class="">2</a> 
 
\t \t \t  <a href="#" class="">3</a> 
 
\t \t \t  <a href="#" class="">4</a> 
 
\t \t \t  <a href="#" class="">5</a> 
 
\t \t \t  <a href="#" class="et-pb-active-control">6</a> 
 
\t \t \t  <a href="#">7</a> 
 
\t \t \t  <a href="#">8</a> 
 
\t \t \t  <a href="#">9</a> 
 
\t \t \t  <a href="#">10</a> 
 

 
\t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
<button class="prev">Prev</button> 
 
<button class="next">Next</button>