带有 cookie 的 jquery 滑块

Question

我正在尝试将 cookie 添加到工作正常的 jquery 滑块，直到我刷新页面并在滑块中向后移动（当 cookie 中的值被添加（值值）而不是添加（值+值）时.

错误发生在 slideMargin += width 上（如果不涉及 cookie，则有效），如果我将其更改为 slideMargin -= width 它可以正常工作，但走错了路。

代码：

  jQuery(document).ready(function($) {
$(function () {
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var slideMargin = readCookie('slide');
var width = 770;
var slidesLength = ($slides.length-2)*770;

        document.onload = checkCookie();
        $('#next-gal')
        .on('click', nextGal);
        $('#prev-gal')
        .on('click', prevGal);              

  function nextGal() {
    slideMargin -= width;
    createCookie('slide', slideMargin,1);
    $slideContainer.animate({'margin-left':(slideMargin)},1000,function() { 
             if (slideMargin === (-Math.abs(($slides.length-1)*770))) {
                slideMargin = -Math.abs(width);
                $slideContainer.css('margin-left', -width);
            }
    });
}
  function prevGal() {
    slideMargin += width;
    createCookie('slide', slideMargin,1);
    $slideContainer.animate({'margin-left':(slideMargin)},1000,function() {
              if (slideMargin === 0) {
                slideMargin = -Math.abs(slidesLength);
                $slideContainer.css('margin-left', -Math.abs(slidesLength));
                }
    });
}   

    function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

    function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

    function eraseCookie(name) {
createCookie(name,"",-1);
}

    function checkCookie() {
 if (slideMargin != null) {
      $slideContainer.css('margin-left', -Math.abs(slideMargin));
      createCookie('slide', slideMargin,1);
 }
else {
    createCookie( 'slide', -1540 ,1);
    slideMargin = -770;
      $slideContainer.css('margin-left', -Math.abs(slideMargin));
}
}

  });
});

任何帮助都会很高兴收到。

罗斯

Answer 1

您从页面的 cookie 中读取的值将是一个字符串。我怀疑您需要先将其转换为一个数字，然后再开始在方程式中使用它 - 否则您会得到一些时髦的东西......

我会替换这个：

var slideMargin = readCookie('slide');

与

var slideMargin = parseInt(readCookie('slide')) || 0; // if no cookie value, or if it's not a number, default to zero

希望这会有所帮助！