-1

我有两个 div 按钮，“向前滑动”和“向后滑动”。他们需要控制我的 div '.inner' 上的 margin-left 值。每次单击其中一个按钮时，都需要在 'inner' 的当前 margin-left 上减去或增加 100%。

假设 '.inner' 的当前 margin-left 值设置为 -300%。单击“向前滑动”时，结果将是左边距 -200%。然后单击“向后滑动”，结果将是左边距 -300%。如果用户再次点击'slide-backward'，结果将是margin-left -400%。

所以本质上，在点击我的按钮时，我的 div 的左边距会逐渐增加或减少。该值以 % 而不是 px 为单位至关重要。

如果这很难理解，我深表歉意。这有点难以解释。如果你不明白我想要做什么，请说出来，我会进一步分解。

我的代码（不太好用）：

$('.slide-back').data('marginLeft', '0').on('click',function(){
    var $inner = $('.inner'),
        curMarg = $(this).data('marginLeft') + 100;

    $inner.css({marginLeft:curMarg+'%'});
    $(this).data('marginLeft',curMarg);
});

$('.slide-forward').data('marginLeft', '0').on('click',function(){
    var $inner = $('.inner'),
        curMarg = $(this).data('marginLeft') - 100;

    $inner.css({marginLeft:curMarg+'%'});
    $(this).data('marginLeft',curMarg);
});
4

2 回答 2

1

jQuery .data()将变量设置为 DOM 元素。在您的代码中，您在 2 个元素上设置了 2 个不同的 var。这意味着您不会添加或减去相同的值。

在这种情况下，如果你只有 1 .inner，你真的不需要使用.data()，一个简单的 var 应该可以工作：

var marginCalc = 0;

$('.slide-back').on('click',function(){
    var $inner = $('.inner');

    marginCalc += 100;

    $inner.css({marginLeft:marginCalc+'%'});
});

$('.slide-forward').on('click',function(){
    var $inner = $('.inner');

    marginCalc -= 100;

    $inner.css({marginLeft:marginCalc+'%'});
});

如果你想保持这种.data()方式，你应该有数据到.innerdiv ：

$('.inner').data('marginLeft', 0);

$('.slide-back').on('click',function(){
    var $inner = $('.inner'),
        nextMLeft = $('.inner').data('marginLeft');

    nextMLeft += 100;

    $inner.css({marginLeft:nextMLeft+'%'});
});

$('.slide-forward').on('click',function(){
    var $inner = $('.inner'),
        nextMLeft = $('.inner').data('marginLeft');

    nextMLeft -= 100;

    $inner.css({marginLeft:nextMLeft+'%'});
});
于 2013-06-01T17:08:53.370 回答
0

您的主要问题是您应该将数据保留在您正在移动的元素上，而不是在向前滑动/向后滑动按钮上。

这是您要求的工作版本的小提琴：

http://jsfiddle.net/ySnrb/

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

var percentToMove = 20; // would be 100 for your example, but just to keep things on screen for this answer make it 20
$('#forward').on('click', function() {
    var left = $box.data('left');
    $box.css('margin-left', (left + percentToMove) + '%');
    $box.data('left', left + percentToMove);
});

$('#back').on('click', function() {
    var left = $box.data('left');
    $box.css('margin-left', (left - percentToMove) + '%');
    $box.data('left', left - percentToMove);
});
于 2013-06-01T17:12:43.677 回答