2

関数内でイベントをバインドするべきではないと以前に言われました。この現在の問題を回避するための最良の選択肢は何ですか? リンクをクリックすると、そのリンクからいくつかのプロパティを取得したいと考えています。これが私が現在行っている方法です。

$(".portfolioLink").click(function(){

            // Show slide and portfolio piece info
            $(".inner-content.portfolio").show();

            // Reset slides timer and pagination
            clearInterval($('#slides').data('interval'));
            $("ul.pagination li").removeClass("current");

            // Get ID from link that is clicked.
            var slideID = $(this).parent().attr("id");

            $("#previous").click(function() {
                slideID--;
                clearInterval($('#slides').data('interval'));
                $("ul.pagination li").removeClass("current");
                portfolioSwitch(slideID);
            });

            $("#next").click(function() {
                slideID++;
                clearInterval($('#slides').data('interval'));
                $("ul.pagination li").removeClass("current");
                portfolioSwitch(slideID);
            });
}

次と前のボタンという、前後に移動する 2 つのボタンがあります。クリックするリンクに応じて、前後に移動したい。$(".portfolioLink")これらのクリック イベントをクリック イベントの外に配置し、同時にポートフォリオ リンクからそれらのプロパティを取得する最良の方法は何ですか?

4

2 に答える 2

6

クリック イベントを別のクリック イベント内にバインドするということ.portfolioLinkは、a がクリックされるたびに、新しいクリック関数が #previous/#next ボタンにバインドされることを意味します。したがって、2 回クリックされた場合.portfolioLinkは 2 回増加し、3 回クリックされた場合は 3 回増加します。次のように、より高いスコープで変数を使用して問題を解決します。

var slideID = 0;

$(".portfolioLink").click(function() {
    $(".inner-content.portfolio").show();

    clearInterval($('#slides').data('interval'));
    $("ul.pagination li").removeClass("current");

    slideID = $(this).parent().attr("id");
}

$("#previous, #next").click(function() {
    slideID = this.id=='next' ? slideID+1 : slideID-1;
    clearInterval($('#slides').data('interval'));
    $("ul.pagination li").removeClass("current");
    portfolioSwitch(slideID);
});
​
于 2012-12-27T17:35:51.027 に答える
4

関数内でイベントをバインドするべきではないと以前に言われました

その関数が別のイベント ハンドラーである場合にのみ、関数内でイベント ハンドラーをバインドすることは問題ではありません。その他のイベント ハンドラーが複数回実行される場合 (あなたの場合のように)、通常はやりたくないたびに新しいイベント ハンドラーをバインド (追加) します。

共有変数 (共通スコープ内の変数) を使用できます...slideIDが設定されていない場合、#nextまたは#previousクリックされても何もしないでください:

var slideID;

$(".portfolioLink").click(function(){
    // ...

    // Get ID from link that is clicked.
    slideID = $(this).parent().attr("id");
});

$("#previous").click(function() {
    if(typeof slideID !== 'undefined') {
       // ...
    }
});

$("#next").click(function() {
    if(typeof slideID !== 'undefined') {
       // ...
    }
});

またはslideID、デフォルトのスライド番号で初期化します。

于 2012-12-27T17:35:28.360 に答える