$ .fn.customTabs中的變量搞砸了多次調用

Question

好吧，所以我在jQuery中創建了一個名爲$.fn.customTabs的函數，並且我將其中的變量設置爲DOM中的某些元素。當我第二次調用它時，變量被設置爲不同的DOM元素並影響我對函數的第一次調用。

任何想法如何在每個函數調用中使用某些實例變量？

EDIT

$.fn.customTabs = function(data,user_options) { 
    $this = $(this); 
    alert($this.attr('id')); 
    var options = 
     { 
      speed : 750, 
      startIndex : 0, 
      duration : 10000, 
      height : "300px" 
     }, 
     final_options = { 
      "width" : "100% - 5px", 
      "position" : "relative", 
      "margin" : "0", 
      "padding" : "5px" 
     }; 
    $.extend(options,user_options); 
    var tabPadding = parseInt(final_options.padding,10); 
    var cssTabHeight = parseInt(options.height,10) - tabPadding + "px"; 
    $this.css(final_options); 
    var num = data.length - 1; 
    if(data) { 
     $container = $('<ul class=\"tabsContainer\">').css({ 
      height : options.height, 
      position : "relative", 
      "list-style" : "none", 
      padding : "0", 
      margin : "0" 
     }); 
     for(var count = 0; count <= num; count++) { 
      $object = data[count]; 

      $tab = $('<li id=\"tab_' + count + '\" class=\"tab\">').css({ 
       height : cssTabHeight 
      }); 

      if($object.element) { 
       $object.element.css({ 
        margin : "0", 
        padding : $object.element.css('padding') || "0" 
       }); 
       if($object.element.is('a')) { 
        $tab.css({ 
         "text-align" : "center" 
        }); 
        $object.element.find('img').css({ 
         "max-height" : "100%", 
         "max-width" : "100%" 
        }); 
       } else if($object.element.is('img')) { 
        $tab.css({ 
         "text-align" : "center" 
        }); 
        $object.element.css({ 
         "max-height" : "100%", 
         "max-width" : "100%" 
        }); 
       } else { 
        $object.element.css({ 
         width : "100% - " + tabPadding, 
         height : "100%" 
        }); 
       } 
       $object.element.appendTo($tab); 
      } else { 

      } 

      $container.append($tab); 
     } 
     $tabWrapper = $('<div>').html($container).css({ 
      overflow: "hidden" 
     }); 
     $this.html($tabWrapper); 
    } else { 

    } 

    var tabIndex = options.startIndex, 
     x, 
     tabHeight = parseInt(cssTabHeight,10) + tabPadding; 

    var interval = setInterval(function() { 
     makeInterval(); 
    },options.duration); 

    $('.tabMenuButton').click(function() { 
     clearInterval(interval); 
     var element = this; 
     var index; 
     $('.tabMenuButton').each(function(i, ele) { 
      if(ele == element) { 
       index = i; 
      } 
     }); 
     var diffrence = index - tabIndex; 
     if(diffrence < 0) { 
      x = "-=" + (tabHeight*parseInt(diffrence,10)); 
      changeTab(x); 
     } else if(diffrence > 0) { 
      x = "-=" + (tabHeight*diffrence); 
      changeTab(x); 
     } 

     tabIndex = index; 
     interval = setInterval(function() { 
      makeInterval(); 
     },options.duration); 
    }); 

    var makeInterval = function() { 
     if(tabIndex != num) { 
      tabIndex++; 
      x = "-=" + tabHeight; 
     } else { 
      tabIndex = 0; 
      x = "+=" + (tabHeight*num); 
     } 

     changeTab(x); 
    } 

    var changeTab = function(distance) { 
     $container.animate({ 
      "top" : distance + "px" 
     }, options.speed); 
    } 

    return $this; 
} 

這個函數第二呼叫作出後，所述$container被設置爲在所述第二呼叫兩個區間創建的元件。

順便說一句，這個代碼的工作原理就是在同一頁上有兩個這樣的代碼。

Answer 1

（...）當我第二次調用它時，變量被設置爲不同的DOM元素並影響我第一次調用函數。任何想法如何在每個函數調用中使用某些實例變量？

你所面對的問題是在地方，你應該使用本地的的使用全局變量。因此，您執行jQuery功能的所有元素共享相同的變量。

這些變量是：

• $this，
• $container，
• $object，
• $tab，
• $tabWrapper，
• 以及可能的其他。

因此，它看起來像你的名字用用$開始治療正常變量，好像他們是特殊的，自動本地。 他們不是本地的：你只是在他們名字的開頭用dolar標誌創建全局變量。

有兩個解決方案爲您提供：

• 在地方，你先定義它，甚至把所有的變量在相應的功能開始，隨着var關鍵字在他們面前的，或
添加 var關鍵字
• 遵循的代碼質量工具，如JSLint的指導：http://www.jslint.com/，

請記住：你的jQuery函數必須元素之間獨立工作，所以你不能使用全局變量。相反，如果你需要以某種方式調用之間或在代碼中的某些原因存儲數據，使用兩個選項之一：

• 使用閉包（存儲在外部範圍的變量，但jQuery函數的範圍內），
• 使用jQuery的.data()將數據附加到特定元素（使用自己特定功能的命名不與你的腳本的用戶使用的其他功能和/或插件干擾），