2011-03-07 54 views
0

我希望每次點擊都與boxes表中正確的出現相關聯。unique var per .click(function(){..});

var J = jQuery.noConflict(); 

const bNumber = 2; 
var boxes = new Array(bNumber); 

boxes[0] = new Array("#cch", "#cc"); 
boxes[1] = new Array("#sinh", "#sin"); 

for(var k=0;k<bNumber;k++) { 
J(boxes[k][0]).click(function() {   
    //J(boxes[k][1]).toggle(); 
}); 
} 

利用此解決方案,每個點擊與boxes[2][1]

回答

2

相關聯的JavaScript沒有塊範圍,唯一的功能範圍。這就是爲什麼在循環中創建函數很棘手。每一次關閉都會引用相同的變量(您的案例中的k)。在循環的最後一次迭代之後,k的值爲2

要捕獲循環計數器的當前值,必須引入一個新的作用域,即調用一個函數。例如。與立即功能

for(var k=0;k<bNumber;k++) { 
    (function(index) { 
     J(boxes[index][0]).click(function() {   
      J(boxes[index][1]).toggle(); 
     }); 
    }(k)); 
} 

另一種方法是創建生成單擊處理函數:

function getClickHandler(element) { 
    return function() {element.toggle()}); 
} 

for(var k=0;k<bNumber;k++) { 
    J(boxes[k][0]).click(getClickHandler(J(boxes[k][1]))); 
} 

OT

你不應該使用new Array初始化數組。沒有必要事先定義數組的大小。使用陣列的文字符號更簡潔:

var boxes = [["#cch", "#cc"], ["#sinh", "#sin"]]; 
+0

作用域是**不是**在這種情況下的問題。見http://jsfiddle.net/mTK8S/在函數上下文中不能訪問'k',所以閉包和詞法範圍在這裏並不重要。 – jAndy 2011-03-07 10:47:05

+0

@jAndy:是的。在你的小提琴中,你不能訪問點擊處理程序中的'k'。但是OP有。請參閱http://jsfiddle.net/mTK8S/1/ – 2011-03-07 10:49:06

+0

@jAndy:那麼評論線'// J(boxes [k] [1]).toggle()會怎麼想呢? – 2011-03-07 10:50:51

0

嘗試這種情況:

var J = jQuery.noConflict(); 

const bNumber = 2; 
var boxes = new Array(bNumber); 

boxes[0] = new Array("#cch", "#cc"); 
boxes[1] = new Array("#sinh", "#sin"); 

function toggleHandler(k) { 
    J(boxes[k][1]).toggle(); 
} 

for(var k=0;k<bNumber;k++) { 
J(boxes[k][0]).click(function() {   
    toggleHandler(k); 
}); 
} 
0

對於閱讀和理解代碼,所述目標框存儲元件爲「數據」上?

for(var k=0;k<bNumber;k++) { 
J(boxes[k][0]).data("box") = $(boxes[k][1]); 
J(boxes[k][0]).click(function() {   
    J(this).data("box").toggle(); 
}); 
} 
相關問題