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);
            });
}

我有两个来回按钮，它们是下一个和上一个按钮。根据我点击的链接，我想前进或后退。在点击事件之外拥有这些点击$(".portfolioLink")事件并同时从投资组合链接中获取这些属性的最佳方式是什么？

4

2 回答 2

6

将单击事件绑定到另一个单击事件中意味着每次.portfolioLink单击 a 时，都会将一个新的单击函数绑定到 #previous/#next 按钮，因此如果单击两次它将增加两次.portfolioLink，如果单击三次则增加三次等。您可以使用更高范围的变量来解决问题，如下所示：

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 回答