-1

好的，所以我在 jQuery 中创建了一个名为的函数，$.fn.customTabs并将其中的变量设置为 DOM 中的某些元素。当我第二次调用它时，变量被设置为不同的 DOM 元素并影响我对函数的第一次调用。

知道如何在每个函数调用中使用某些实例变量吗？

编辑

$.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设置为在第二次调用中为两个间隔创建的元素。

顺便说一句，当同一页面上有两个代码时，这段代码的工作就会变得混乱。

4

1 回答 1

1

(...) 当我第二次调用它时，变量被设置为不同的 DOM 元素并影响我对函数的第一次调用。知道如何在每个函数调用中使用某些实例变量吗？

您面临的问题是在应该使用本地变量的地方使用全局变量。因此，执行 jQuery 函数的所有元素共享相同的变量。

这些变量是：

  • $this,
  • $container,
  • $object,
  • $tab,
  • $tabWrapper,
  • 可能还有其他。

所以看起来你正在处理名称以开头的普通变量，就$好像它们是特殊的，自动本地的。它们不是本地的：您只是在其名称的开头创建带有 dolar 符号的全局变量。

有两种解决方案适合您：

  • 在您第一次定义它的地方添加var关键字，甚至将所有变量放在适当函数的开头，var在它们前面加上关键字，或者
  • 遵循 JSLint 等代码质量工具的指南：http: //www.jslint.com/，

记住：你的 jQuery 函数必须在元素之间独立工作，所以你不能使用全局变量。相反，如果您需要在调用之间或出于某种原因在代码中以某种方式存储数据，请使用以下两个选项之一：

  • 使用闭包（在外部范围内存储变量，但在 jQuery 函数的范围内），
  • 使用 jQuery.data()将数据附加到特定元素（使用您自己的函数特定命名，以免干扰脚本用户使用的其他函数和/或插件），
于 2012-11-28T07:00:44.073 回答