1

我有一个从屏幕流出的 div 网格，我有 prev 和 next 按钮来控制这些内容。

基本上，在每个 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 的内容将移动到它旁边的一个。

我使用了这样的 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 回答