多個div類上的相同函數不起作用

我正在做一些非常錯誤的事情，只是找不到解決方案。多個div類上的相同函數不起作用

情況： 我有許多產品，每個產品的報價數。那些報價自動滾動分區。如果滾動到達最後一個報價是回滾到第一個。

什麼工作： 當它在1個格應用的功能基本上是工作的，但是當多個DIV應用它並不能回滾到前一個或不停不休滾動。

這是我這個寫的函數：

function quoteSlide(divname){ 
$total = ($(divname+" > div").size()) 
$width = $total * 160; 
$(divname).css('width', ($width)); 
console.log ($totalleft *-1); 
if ($width - 160 > $totalleft *-1){ 
    $currentleft = $(divname).css('left'); 
    $step = -160; 
    $totalleft = parseInt($currentleft)+$step; 
}else{ 
    $totalleft = 0; 
} 

$(divname).animate(
    { 
     left: $totalleft 
    }, // what we are animating 
    'slow', // how fast we are animating 
    'swing', // the type of easing 
    function() { // the callback 
    });

}

它正在像執行：結合quoteSlide('#quotecontainer_1');與setInterval的，因此自動保持滾動。

這是jsFiddle它出錯了（所以應用於多於一個div）http://jsfiddle.net/FsrbZ/。這是一切順利的jsFiddle。（適用於1個格）

當改變如下：

quoteSlide('#quotecontainer_1'); 
    quoteSlide('#quotecontainer_2'); 
setInterval(function() { 
    quoteSlide('#quotecontainer_1'); 
    quoteSlide('#quotecontainer_2'); 
}, 3400);

到

quoteSlide('#quotecontainer_1'); 

setInterval(function() { 
    quoteSlide('#quotecontainer_1'); 
}, 3400);

它的工作...但僅限於1個quotecontainer。

來源

2012-09-26 Sebass van Boxel

a nd HTML代碼，它在哪裏？ –

你可以在jsFiddle找到它。問題不在於HTML（我認爲;-)），這就是爲什麼我沒有在這裏發佈它。 –

This works.正如已經馬太·米哈伊提到的，$totalleft變量被調用之間共享。此外，我還將setInterval呼叫轉移到quoteSlide()功能中，因此您不必重複自己。

我已將該變量移動到quoteSlide()函數中，因此每個調用都會獲得自己的該變量的實例。

另一件事有關JavaScript：

JavaScript是不 PHP，你不需要用$ -sign前綴您的變數！就個人而言，我使用約定爲所有jQuery對象加上$。

PS：你可能希望刪除第一次調用callback()，允許訪問者實際讀取的第一次報價。我已經包含了它，因爲這是它在原始代碼中的工作方式。

function quoteSlide(divname) { 
    var $totalleft = 0; 
    var callback = function() { 
     $total = ($(divname + " > div").size()) 
     $width = $total * 160; 
     $(divname).css('width', ($width)); 
     if ($width - 160 > $totalleft * -1) { 
      $currentleft = $(divname).css('left'); 
      $step = -160; 
      $totalleft = parseInt($currentleft) + $step; 
     } else { 
      $totalleft = 0; 
     } 

     $(divname).animate({ 
      left: $totalleft 
     }, 'slow', 'swing', function() {}); 
    }; 
    callback(); # <-- I would remove this 
    setInterval(callback, 3400); 
} 

quoteSlide('#quotecontainer_1'); 
quoteSlide('#quotecontainer_2');

來源

2012-09-26 09:42:18 phant0m

這是因爲您的功能對所有呼叫都使用相同的$totalleft變量，所以當您多次調用該功能時，存儲在$totalLeft變量中的號碼不正確。

看看這個http://jsfiddle.net/FsrbZ/3/

var $totalleft = new Array(); 
function quoteSlide(divname){ 
    $total = ($(divname+" > div").size()) 
    $width = $total * 160; 
    $(divname).css('width', ($width)); 
    if ($width - 160 > $totalleft[divname] *-1){ 
     $currentleft = $(divname).css('left'); 
     $step = -160; 
     $totalleft[divname] = parseInt($currentleft)+$step; 
    }else{ 
     $totalleft[divname] = 0; 
    } 

    $(divname).animate(
     { 
      left: $totalleft[divname] 
     }, 
     'slow', 
     'swing', 
     function() { 
     }); 
}

來源

2012-09-26 09:36:25

看起來合法......但是，如何爲每個新的quotecontainer創建新的$ totalleft？這不是一個函數的用途，所以你只需要編寫一次代碼？或者我能以某種方式使它變成動態的嗎？ –

我已經編輯我的答案..希望這是你想要 –

這將是它的！謝謝！ :-) –

關於什麼的

$total = ($(divname+" div").size())？

http://jsfiddle.net/SnakeEyes/FsrbZ/2/

讓我知道，如果這是你想要的

來源

2012-09-26 09:40:28

嗯，有些人快，但這裏的另一個解決方案，這就是作品：http://jsfiddle.net/FsrbZ/6/