2012-12-27 158 views
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")點擊事件之外進行這些點擊事件並同時從投資組合鏈接獲取這些屬性的最佳方式是什麼?

+0

你能不能也發佈你的html代碼? – Chanckjh

回答

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

6

綁定內的另一個點擊事件的點擊事件,意味着每次一個.portfolioLink被點擊時,一個新的點擊功能被綁定到先前的#/#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); 
}); 
​ 
+0

+1兩個按鈕共享點擊事件處理程序是有道理的。 –

+0

@FelixKling - 謝謝,upvoted你的,因爲他們都非常相同的想法。 – adeneo

+0

非常好的答案傢伙! – wowzuzz