1

画面から流れる div のグリッドがあり、このコンテンツを制御する前と次のボタンがあります。

基本的に、各 div の内部にはいくつかのコンテンツがあり、ユーザーが prev をクリックすると、すべてのコンテンツがそこにある div から次の div に移動する必要があります。いくつかのコードを試してみましたが、私は正しい軌道に乗っています...

<div class="box"><img src="../images/two.jpg" alt="" /></div>
<div class="box"><p>Lorum ipsum</p></div>
<div class="box"><img src="../images/three.jpg" alt="" /></div>

$('.prev').click(function(){                
   $('.box').each(function(){
      var $destination = $(this).prev('.box');
      $(this).html().appendTo($destination);
   });
});

前もって感謝します！

4

2 に答える 2

1

を使用するappendTo()場合は、divのコンテンツを宛先divに追加します。宛先divのデータを現在のdivのデータに置き換えたい場合、apppendTo（）は必要なものではありませんが、 $(destination).text($(this).html())

于 2012-08-21T11:10:30.610 に答える
0

あなたの予想される結果が正確に何であるかはよくわかりません。ただし、これを理解した方法は、各 div にコンテンツがあり、前をクリックすると各 div のコンテンツが前の div に移動し、次をクリックすると各 div のコンテンツが次の div に移動することです。

私はこのような HTML を使用しました (わかりやすくするために、いくつかの div を追加しました):

<div class="box"></div>
<div class="box"></div>
<div class="box"><img src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png" alt="" /></div>
<div class="box"><p>Lorum ipsum</p></div>
<div class="box"><img src="http://www.fileden.com/files/2012/6/19/3318010/Script.png" alt="" /></div>
<div class="box"></div>
<div class="box"></div>

次/前のアクションは次のようになります。

var $steps = $('.box');

$('.prev').click(function() {
    for (i = 0; i < $steps.length; i++) {
        if (i > 0) {
            var $lastStep = $($steps[i - 1]);
            var $currentStep = $($steps[i]);

            $lastStep.html($currentStep.html());
            $currentStep.html('');
        };
    };
});

$('.next').click(function() {
    for (i = $steps.length-1; i > -1; i--) {
        if (i + 1 < $steps.length) {
            var $currentStep = $($steps[i]);
            var $nextStep = $($steps[i + 1]);

            $nextStep.html($currentStep.html());
            $currentStep.html('');
        }
    };
});

すべてのコンテンツが前または次の div のセットにまとめて移動されていることがわかります。

それがあなたが探しているものでない場合は、私に知らせてください。また、前または次への移動をいつ停止するかを示す何らかの指標が必要になります。そうしないと、すべてのコンテンツが失われます。

デモ- すべてのコンテンツを前後の要素に移動する

于 2012-08-21T12:11:14.013 に答える