jQuery添加到當前空白左值

-1

我有兩個div按鈕，「前滑」和「後滑」。他們需要控制我的div'.inner'的剩餘價值。每次單擊其中一個按鈕時，都需要減去或添加100％到當前的'inner'的左邊空白處。jQuery添加到當前空白左值

假設'.inner'的當前margin-left值設置爲-300％。點擊「向前滑動」後，結果將是-200％左右的餘量。然後點擊'向後滑動'，結果將是空白-300％。如果用戶再次單擊「向後滑動」，則結果將爲-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); 
});

來源

2013-06-01 beliy333

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格：

$('.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-01 17:08:53

非常感謝！我用你的第一個解決方案。你知道它友好的所有主流瀏覽器嗎？我是jQuery的新手，所以我不太瞭解。但我渴望學習！ – beliy333

這是非常基本的JS，所以我認爲它與每個主流瀏覽器兼容。 –

謝謝你的時間。 – beliy333

你的主要問題是，你應該讓你在移動的元素有關的數據，而不是在滑動前進/滑動後退按鍵。

這裏是一個工作版本，你問一個小提琴：

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-01 17:12:43

jQuery添加到當前空白左值

回答

相關問題