Question

我之前被告知我不应该在函数内部绑定事件。什么是解决当前问题的最佳选择？我点击链接，从该链接我想获得一些属性。这是我目前正在做的事情。

$(".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")点击事件之外并同时从投资组合链接获取这些属性的最佳方法是什么？

Answer 1

将点击事件绑定到另一个点击事件中意味着每次点击.portfolioLink时，新的点击功能被绑定到#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); });，它将增加两次单击两次，如果单击三次则增加三次等。您可以使用较高范围内的变量来解决问题，如下所示：

{{1}}

Answer 2

我之前被告知我不应该在函数
中绑定事件

在函数内部绑定事件处理程序并不是问题，只有当该函数是另一个事件处理程序时。如果其他事件处理程序将被执行多次（就像你的情况一样），你每次都会绑定（添加）一个新的事件处理程序，而这通常是你不想做的。

您可以使用共享变量（常见范围内的变量）...如果未设置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。

在click方法中绑定事件

2 个答案: