在for循環中使用兩個數組

Question

我有2個數組。兩者都是文本字段。我想在TextField1上觸發一個按鍵時清除textfield2。我怎麼能在一個keyup函數中使用這兩個數組？

var showItem=['orange', 'beans', 'rose']; 
var typeItem=['fruit', 'veggie', 'flower']; 

我試過使用for循環，但沒有按預期工作。

for (i = 0; i < showItem.length; i++) { 
    $('#' + showItem[i]).keyup(function() { 
     console.log(typeItem[i]); 
     $('#' + typeItem[i]).text(''); 
    }); 
} 

Answer 1

的問題是，所有的回調是指一個變量i，你通過數組迭代這是隨時間變化。

而不是使用for循環迭代，您可以優雅地使用Array.prototype.forEach作爲藉口爲每個回調創建單獨的閉包。然後每個內部函數都會引用它自己的i值，這將有效地保持不變。

showItem.forEach(function(item, i) { 
    $('#'+item).keyup(function(){ 
     $('#'+typeItem[i]).text(''); 
    }); 
}); 

Answer 2

問題：在當時的i

值當事件被觸發爲4並且在兩個數組第四索引處沒有項目，所以$('#'+typeItem[i]).text('');將無法​​正常工作。

解決方案：

的代碼可以被包裹在IIFE和i可以傳遞給它，使得它會被緩存的每個元素。但是，有一個更好的解決方案。

使用Array#indexOf可獲取單擊元素的索引。

var showItem = ['orange', 'beans', 'rose']; 
var typeItem = ['fruit', 'veggie', 'flower']; 

var selector = '#' + showItem.join(', #'); // '#orange, #beans, #rose' 

$(selector).keyup(function() { 
    // Get index of the id of the clicked element from array 
    var index = showItem.indexOf($(this).attr('id')); 

    // Get the element at index from second array and set the innerText to empty string 
    $('#' + typeItem[index]).text(''); 
});