次のボタンと前のボタンを使用してdivをスクロールする

Question

2つのボタンで2つの異なるdivをスクロールしようとしています。

基本的には、ソフトウェアのインストール中に表示されるセットアップウィザードのようなものです。ので、ここで

はマークアップ：

$('#nxt').click(function() { 

        $(this).parent(".box").animate({left: '-150%'}, 500); 
        $(this).parent(".box").next(".box").animate({left: '50%'},500); 
     }); 
$('#prv').click(function() { 

      $(this).parent(".box").animate({left: '150%'}, 500); 
      $(this).parent(".box").prev(".box").animate({left: '50%'},500); 
      }); 

私が行って「次へ」の操作が、「以前のない操作を行うことができています：ここ

<div id="container"> 

     <div id="box1" class="box"> 
      <button id="nxt">Next</button> 
      <button id="prv">Previous</button> 
     </div> 
     <div id="box2" class="box"> 
      <button id="nxt">Next</button> 
      <button id="prv">Previous</button> 
     </div> 

    </div> 

と両方のボタンのためのjQueryのです"1つ、jqueryで間違いがあります、それで私を助けてください。

あなたはthis fiddle

を一瞥をも持つことができますあなたが複数の要素に同じIDを使用してはならない

Answer 1

ありがとうございました。代わりにclass属性を使用してください。下記のマークアップとjqueryを参照してください。

HTML：前と次のボタンのidクラスに変更し

<div id="container"> 
    <div id="box1" class="box"> 
     <button class="nxt">Next</button> 
     <button class="prv">Previous</button> 
    </div> 
    <div id="box2" class="box"> 
     <button class="nxt">Next</button> 
     <button class="prv">Previous</button> 
    </div> 

</div> 

のjQuery：クラス属性のためのjQueryのセレクタで変更を行い、それがあるように、コードの残りの部分を維持します。

$('.nxt').click(function() { 
    $(this).parent(".box").animate({left: '-150%'}, 500); 
    $(this).parent(".box").next(".box").animate({left: '50%'},500); 
}); 

$('.prv').click(function() {  
    $(this).parent(".box").animate({left: '150%'}, 500); 
    $(this).parent(".box").prev(".box").animate({left: '50%'},500); 
}); 

JSFiddle Demo

Answer 2

あなただけ$('#prv').click(function(){}あなたが最初のdivにおよび第二のdivのボタンに同じIDを使用し

JSFiddle link

Answer 3

で.animate({left: '-50%'}を見逃しています。それは正しくなく、それが問題の原因です。正しいバージョンを確認するにはthis fiddleをチェックしてください。

$('#nxt').click(function() { 
 
      $(this).parent(".box").animate({left: '-150%'}, 500); 
 
      $(this).parent(".box").next(".box").animate({left: '50%'},500); 
 
}); 
 
$('#prv1').click(function() { 
 
    $(this).parent(".box").animate({left: '150%'}, 500); 
 
    $(this).parent(".box").prev(".box").animate({left: '50%'},500); 
 
});

#container { 
 
    position: absolute; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
.box { 
 
    position: absolute; 
 
    width: 50%; 
 
    background-color: white; 
 
    height: 500px; 
 
    line-height: 300px; 
 
    font-size: 50px; 
 
    text-align: center; 
 
    border: 2px solid black; 
 
    left: 50%; 
 
    top: 100px; 
 
    margin-left: -25%; 
 
} 
 

 
#box2 { 
 
    left: 150%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 

 
      <div id="box1" class="box"> 
 
       <button id="nxt">Next</button> 
 
       <button id="prv">Previous</button> 
 
      </div> 
 
      <div id="box2" class="box"> 
 
       <button id="nxt1">Next</button> 
 
       <button id="prv1">Previous</button> 
 
      </div> 
 

 
     </div>