12

メソッドのjQueryドキュメントには次のように記載されています。.toggle()

.toggle（）メソッドは便宜上提供されています。同じ動作を手動で実装するのは比較的簡単です。これは、.toggle（）に組み込まれている前提条件が制限されていることが判明した場合に必要になる可能性があります。

組み込まれている仮定.toggleは、私の現在のタスクを制限することが証明されていますが、ドキュメントでは、同じ動作を実装する方法について詳しく説明していません。eventDataに提供されているハンドラー関数に渡す必要がありtoggle()ますが、これのみ.bind()をサポートし、ではないよう.toggle()です。

私の最初の傾向は、クリック状態を格納するために単一のハンドラー関数に対してグローバルなフラグを使用することです。言い換えれば、ではなく：

$('a').toggle(function() {
  alert('odd number of clicks');
}, function() {
  alert('even number of clicks');
});

これを行う：

var clicks = true;
$('a').click(function() {
  if (clicks) {
    alert('odd number of clicks');
    clicks = false;
  } else {
    alert('even number of clicks');
    clicks = true;
  }
});

私は後者をテストしていませんが、うまくいくと思います。これはこのようなことをするための最良の方法ですか、それとも私が見逃しているより良い方法がありますか？

4

2 に答える 2

36

それを行うための合理的な方法のようです...余分な変数を導入するのではなく、jQueryのデータストレージユーティリティを利用することをお勧めします（リンク全体を追跡したい場合は頭痛の種になる可能性があります） 。だからあなたの例に基づいて：

$('a').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    alert('odd number of clicks');
  } else {
    alert('even number of clicks');
  }
  $(this).data("clicks", !clicks);
});
于 2010-03-17T00:47:05.063 に答える
2

.toggle()これは、特にjQuery 1.9以降で削除されたため、の代替を実装するプラグインです。

使い方：

このメソッドのシグネチャは次のとおりです。

.cycle( functions [, callback] [, eventType])
  • functions[配列]：循環する関数の配列
  • callback[関数]：各反復の完了時に実行される関数。現在の反復と現在の関数の出力が渡されます。functions配列内の各関数の戻り値を使用して何かを行うために使用できます。
  • eventType[文字列]：循環するイベントタイプを指定する文字列。例："click mouseover"

使用例は次のとおりです。

$('a').cycle([
    function() {
      alert('odd number of clicks');
    }, function() {
      alert('even number of clicks');
    }
]);

ここにデモンストレーションを含めました。

プラグインコード：

(function ($) {
    if (!Array.prototype.reduce) {
        Array.prototype.reduce = function reduce(accumulator) {
            if (this === null || this === undefined) throw new TypeError("Object is null or undefined");
            var i = 0,
                l = this.length >> 0,
                curr;

            if (typeof accumulator !== "function") // ES5 : "If IsCallable(callbackfn) is false, throw a TypeError exception."
            throw new TypeError("First argument is not callable");

            if (arguments.length < 2) {
                if (l === 0) throw new TypeError("Array length is 0 and no second argument");
                curr = this[0];
                i = 1; // start accumulating at the second element
            } else curr = arguments[1];

            while (i < l) {
                if (i in this) curr = accumulator.call(undefined, curr, this[i], i, this);
                ++i;
            }

            return curr;
        };
    }
    $.fn.cycle = function () {
        var args = Array.prototype.slice.call(arguments).reduce(function (p, c, i, a) {
            if (i == 0) {
                p.functions = c;
            } else if (typeof c == "function") {
                p.callback = c;
            } else if (typeof c == "string") {
                p.events = c;
            }
            return p;
        }, {});
        args.events = args.events || "click";
        console.log(args);
        if (args.functions) {
            var currIndex = 0;

            function toggler(e) {
                e.preventDefault();
                var evaluation = args.functions[(currIndex++) % args.functions.length].apply(this);
                if (args.callback) {
                    callback(currIndex, evaluation);
                }
                return evaluation;
            }
            return this.on(args.events, toggler);
        } else {
            //throw "Improper arguments to method \"alternate\"; no array provided";
        }
    };
})(jQuery);
于 2013-02-27T04:04:29.747 に答える