Question

我有两个div按钮，＆＃39;向前滑动＆＃39;和＆＃39;滑回＆＃39;。他们需要控制我的div＆＃39; .inner＆＃39;中剩余边距的值。每次点击其中一个按钮时，它需要减去或添加100％到内部＆＃39;内部的当前边距。

假设＆＃39; .inner＆＃39;的当前保证金左值。设定为-300％。点击＆＃39;向前滑动＆＃39;结果将是保证金保留-200％。然后点击向后滑动＆＃39;结果将是保证金左-300％。如果用户点击向后滑动＆＃39;再次，结果将是保证金留下-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);
});

Answer 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()方式，则应将数据提供给.inner div：

$('.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+'%'});
});

Answer 2

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

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

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);
});

jQuery添加到当前margin-left值

2 个答案: