-1

さて、jQueryで呼び出された関数を作成し、その$.fn.customTabs中の変数をDOM内の特定の要素に設定しています。2回目に呼び出すと、変数が異なる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;
}

この関数の2回目の呼び出しが行われた後、$containerは両方の間隔で2回目の呼び出しで作成された要素に設定されます。

ところで、このコードは、同じページに2つあると、混乱してしまいます。

4

1 に答える 1

1

（...）2回目に呼び出すと、変数が異なるDOM要素に設定され、関数への最初の呼び出しが実行されます。各関数呼び出しで特定のインスタンス変数を使用する方法はありますか？

あなたが直面している問題は、ローカル変数を使用する必要がある場所でのグローバル変数の使用です。その結果、jQuery関数を実行するすべての要素は、同じ変数を共有します。

これらの変数は次のとおりです。

  • $this、
  • $container、
  • $object、
  • $tab、
  • $tabWrapper、
  • そしておそらく他。

$したがって、名前が特別で自動的にローカルであるかのように名前が付いた通常の変数を扱っているように見えます。それらはローカルではありません。名前の先頭にdolar記号が付いたグローバル変数を作成しているだけです。

あなたのための2つの解決策があります：

  • var最初に定義した場所にキーワードを追加するか、適切な関数の先頭にすべての変数をvar配置し、その前にキーワードを配置するか、または
  • JSLintなどのコード品質ツールのガイドに従ってください：http ：//www.jslint.com/ 、

また、jQuery関数は要素間で独立して機能する必要があるため、グローバル変数を使用しないでください。代わりに、呼び出し間または何らかの理由でコード内にデータを保存する必要がある場合は、次の2つのオプションのいずれかを使用してください。

  • クロージャを使用します（変数を外部スコープに格納しますが、jQuery関数のスコープ内にあります）。
  • jQueryを使用.data()して特定の要素にデータを添付します（スクリプトのユーザーが使用する他の関数やプラグインに干渉しないように、独自の関数固有の名前を使用します）、
于 2012-11-28T07:00:44.073 に答える