4

私はタブ付きのインターフェイスを使用しており、タブのクリックイベントを処理するために次の jQuery 関数を設定しています。

$(document).ready(function () {

    $('a#foo').click(function() {
        //content, various calls
        return false;
    });
});

上記は私のタブの 1 つの例であり、他のタブも同じドキュメント準備完了ブロック内にあります。私がしなければならなかったのは、現在選択されているタブを再クリックできないようにすることと、必要に応じてタブを手動で無効にできるようにすることでした。私は次の方法でこれを達成しました：

$('a#play').unbind('click');

これは正常に機能し、確かにタブを無効にしますが、問題はかつてそこにあったクリックアクションを再バインドすることになります. bind 関数を使用してこれを達成しました。

$('a#foo').bind('click', function() {
//the same content and calls as before
return false;
});

これも問題なく動作しますが、UI にタブを追加したため、非常に雑然としています。当面の解決策は、関数を変数として作成し、それを最初のクリック作成とバインド イベントに渡すことです。そのようです：

var Foo = new function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

これは、何らかの理由で、ブラウザのクラッシュの問題を引き起こしているようです。この場合、関数を var として渡すことはできませんか、それとも間違っていますか? または、探している結果を達成するためのより良い方法はありますか? ありがとう。

4

6 に答える 6

7 
$('a#foo').click(Foo());

$('a#foo').bind(Foo());

は関数を提供しますが、その後に'Fooを追加すると、関数自体を渡すのではなく、関数を呼び出すことになります。関数を呼び出しているので、とに渡されてしまい、明らかに何もしません。他の問題のいくつかは、そのタブへの切り替えを2回シミュレートしている（イベントハンドラーを2回呼び出す）という事実に起因する可能性があります。()falseclickbind

var Foo = function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo);

$('a#foo').bind(Foo);

^^あなたがやりたいことをするべきです。

あるいは、私が探している結果を達成するためのより良い方法はありますか？

現在、あなたのデザインについて私たちが本当に知っているのは、クリックイベントハンドラーを使用してタブを切り替えることです。その部分は素晴らしいですが、あなたが本当に望むより深い答えを与えるために、より多くの情報が必要になります。あなたがその中Fooにコードを投稿すれば、私たちはもう少し助けることができるはずです。：D

new編集：私が見逃した関数宣言に気づいたSLaks♦の功績。彼の説明にもう少し詳細を追加します。

var foo = new function（...）{...}と書くと、関数リテラルを作成し、それをコンストラクターとして呼び出します。

と同等です

var SomeClass = function（...）{...}; var foo = new SomeClass;

SomeClassダミー変数なし。

ご想像のとおり、これfunction() {}は無名関数です。newjavascriptではもう少し混乱します。関数を呼び出してその前にnew。を付けると、その関数を使用して、関数で定義されたクラスのインスタンスをインスタンス化することになります。JSでは、他のほとんどの言語とは異なり、クラスの定義全体が1つのコンストラクター関数にあり、そこから次のようにすべてのインスタンス変数を設定します。

Foo = function() { 
    this.a = "lala";
    this.b = 5;
}

'クラス'のインスタンスメソッドを作成するには、prototype属性を使用します。しかし、私は自分が非常に話題から外れていることに気づきました。詳細については、こちらとこちらをご覧ください。：D

于 2011-02-09T00:54:16.213 に答える
3

new関数定義から削除し、使用するときは関数の呼び出しを停止する必要があります。

を書くときvar foo = new function(...) { ... }は、関数リテラルを作成し、それをコンストラクターとして呼び出します。

と同等です

var SomeClass = function(...) { ... };
var foo = new SomeClass;

SomeClassダミー変数なし。

関数リテラルを変数に割り当てるだけです。

を書くときは、を呼び出し、結果をに渡し.click(foo())ます。 関数を返さない限り、それはあなたがやりたいことではありません。 fooclick
foo

fooかっこを外して自分自身を渡す必要があります。

于 2011-02-09T00:55:14.710 に答える
3

したがって、最初に、クリックは関数を受け入れますが、クリックは準備ができたときに関数を実行するため、（）なしで呼び出します。（）を追加することにより、それをまっすぐに呼び出します。

次に、bindは文字列（バインドするイベント）と関数（上記のように）を取ります。

以下を使用してください。

function Foo() {
    //same content and calls as before
    return false;
}


$('a#foo').click(Foo);    
$('a#foo').bind('click', Foo);

お役に立てば幸いです:)

于 2011-02-09T00:55:51.033 に答える
3

試す：

var foo = function() // not "new function", as this creates an object!
{
    return false;
}

$("a#foo").click(foo); // not "Foo()", as you can't call an object!

探している結果を達成するためのより良い方法として、すべてのタブにクラスを設定することができます.tab。そうすれば、次のことができます。

$("a.tab").click(function() { return false; });

id...たくさんのsでふわふわする必要はありません。

于 2011-02-09T00:55:55.667 に答える
2

別のアプローチを取り、しないでくださいunbind()。

タブはすべて共通のコンテナにあると思います。その場合は、delegate()(docs)メソッドを使用してコンテナーにハンドラーを配置します。

一般的なコード例を次に示します。

$('#container').delegate('.tab:not(.selected)', 'click', function() {
    $(this).addClass('selected')
           .siblings('selected').removeClass('selected');
    // rest of the tab code
});

これにより、クラス.tabを持たない要素のクリックのみがトリガーされます。.selected特定のコードに合わせて変更する必要があります。

于 2011-02-09T01:06:23.627 に答える
0

括弧を追加すると関数が呼び出されますが、それをかっこよくしたい場合は、バインドする関数を Foo が返すようにすることができます。

function Foo(){

    return function(){
        //your onclick event handler here.
    };
}

$('a#bar').bind(Foo())

これは、JavaScriptの関数プログラミングの側面であるクロージャーを利用します。これはクールですが、他のいくつかの回答ほど効率的ではありません。クロージャーはいくつかのクールなものを作成するために使用できるため、クロージャーについて調査する必要があります。 http://www.javascriptkit.com/javatutors/closures.shtml

于 2011-02-09T01:06:55.337 に答える