使用[i]於循環在元素指向讓我無法識別的表達

Question

不知道如何做到這一點，否則...... 但是，這是我想要做的事：

我有一個數組單選按鈕

<div id="xrowcont_0"> 
    <input type="radio" name="13_641" value="a" id="13_641_form_a" ><label for="13_641_form_a"><span></span></label> 
    <input type="radio" name="13_641" value="b" id="13_641_form_b" checked="checked"><label for="13_641_form_b"><span></span></label> 
    <div id="xmod_mach_list_0" style="display:none;">BOO1</div> 
</div> 

<div id="xrowcont_1"> 
    <input type="radio" name="13_642" value="a" id="13_642_form_a"><label for="13_642_form_a"><span></span></label> 
    <input type="radio" name="13_642" value="b" id="13_642_form_b"><label for="13_642_form_b"><span></span></label> 
    <div id="xmod_mach_list_1" style="display:none;">BOO2</div> 
</div> 

... ++++ 

這個想法是，當你在<div id="xrowcont_0">選擇單選框「B」，它取消隱藏<div id="xmod_mach_list_1"每一行的旁邊。

這裏是JS：

比方說我們有13行...

for (var i=0;i<13;i++) {  
    var a1 = "'#xrowcont_" + [i] + " input[type=radio]'"; 
    var a2 = "'#xrowcont_" + [i] + " input:checked'"; 

    console.log(a1); 
    console.log(a2); // these show up just fine. 

    $(a1).on("click", function() { // but here it breaks. 
     var state = $(a2).val(); 
     if (state == "b") { 
      $('#xmod_mach_list_' + [i]).css('opacity',0).show().animate({ opacity: 1 }, 300); 
      console.log("Show Button"); 

     } else { 
      $('#xmod_mach_list_' + [i]).animate({ opacity: 0} , 200); 
      setTimeout(function() {$('#xmod_mach_list_' + [i]).hide(); }, 200); 
      console.log("Hide Button"); 
     };  
    }); 
} 

它給我Uncaught Error: Syntax error, unrecognized expression: '#xrowcont_0 input[type=radio]'，儘管這是我想在... $(a1).on("click", function() {...中填充等部分是什麼。

我該如何解決這個問題？

Answer 1

的問題是，你的字符串a1和a2無效jQuery選擇。相反，你認爲你不希望自己的價值觀包括單引號，所以採取這些的。

它應該是：

var a1 = "#xrowcont_" + [i] + " input[type=radio]"; 
var a2 = "#xrowcont_" + [i] + " input:checked"; 

你不會做的事：

$("'#xrowcont_0 input[type=radio]'").on(...); 

使用jQuery的時候，所以你也宣佈選擇作爲獨立變量時，不應該把他們串內。選擇器本身並不'#foo'，這是#foo。單或雙引號只有在那裏，以表示它是在傳遞給jQuery對象的字符串 - 你的變量是已經字符串雖然。

---

與for循環有關的代碼有一個單獨的，不相關的問題。您使用事件處理程序和setTimeout延遲執行某些代碼，但是在該函數中使用了i（for循環的索引變量）。由於變量在JavaScript中的作用範圍，延遲執行將使用i的值作爲循環迭代的上一次。

要解決這個問題，你需要創建使用立即調用的函數表達式一個新的閉包（變量一個新的範圍內）：

for(var i = 0; i < 13; i++) { 
    (function(i) { 
     // i here is a different variable to i outside 
     // it's passed, and maintains, the value for this iteration of the loop 
     ... // your loop code 
    })(i); 
} 

Answer 2

刪除括號。 [i]是含有i作爲其唯一的項目的陣列。

您還應該注意，使用i在setTimeout將導致問題，這要歸功於閉包的魔力。考慮你形成循環，像這樣：

for(i ......) { (function(i) { 
    ... 
})(i); }