串聯包含HTML的字符串無法正常工作

Question

基本上，這里是一段工作代碼（jquery / javascript）：

$('<label>Option ' + (i + 1) + '<span class="small">Enter text</span></label><input type="text" name="option[]"><input class="extra" type="checkbox" name="checks[]" value=' + i + '>').appendTo('#container'); 

i工作涉及上述代碼。 我想要在這里包含i的值：

name="checks['+i+']"

但它似乎不喜歡誇大這一點。 我對此混淆不清，因此如果有人可以向我解釋，請多謝。

Answer 1

沒有看到問題。 為了更易於閱讀/調試，請嘗試

  var html = '<label>Option ' + (i + 1) + '<span class="small">Enter text</span></label>'+
 '<input type="text" name="option['+i+']">'+
 '<input class="extra" type="checkbox" name="checks['+i+']" value="'+i+'">'
 $(html).appendTo('#container'); 

Answer 2

效果很好， 這是一個演示 。

檢查checkbox顯示以下輸出：

<input class="extra" type="checkbox" name="checks[0]" value="0">

嘗試將行復制並粘貼到jsfiddle中，看看是否可行...

Answer 3

我已經在jsfiddle中嘗試了上面的代碼，但是dint遇到了任何問題

for(i = 0 ; i < 2; i++){
var html = '<label>Option ' + (i + 1) + '<span class="small">Enter text</span></label>'+
 '<input type="text" name="option['+i+']">'+
 '<input class="extra" type="checkbox" name="checks['+i+']" value="'+i+'">';
alert(html)
   }

嘗試使用parseInt ....也可以詳細說明您的問題。

Answer 4

將您的html文本保留為數組元素，它們更易於閱讀和維護。 也可能會加快串聯速度。

var htmlText = [
    '<label>Option ' + (i + 1) + '<span class="small">Enter text</span></label>',
    '<input type="text" name="option[]">',
    '<input class="extra" type="checkbox" name="checks[' + i + ']" value=' + i + '>'
    ].join("");

工作實例