2016-01-22 78 views
0

我有下面的代碼線的內側箱填充字符串JS:與動態數據

'<a class="txt333 clps" data-toggle="collapse" aria-expanded="false" '+ 
    'href="#collapse_reqConf'+sent+'" '+ 
    'aria-controls="collapse'+sent+'" '+ 
    'data-parent="#accordion_reqConf'+sent+'">' 

哪個填充變種發送和產生以下結果(從源視圖):

<a class="txt333 clps" data-parent="#accordion_reqConf137" aria-controls="collapse137" href="#collapse_reqConf'+sent+'" aria-expanded="false" data-toggle="collapse"> 

我不能找出爲什麼一個屬性沒有被正確插入...


更新:我最後的評論中的工作答案。

+0

該字符串格式正確。 [必須有其他事情。](https://jsfiddle.net/4ooh2soa/) –

+0

似乎沒問題:https://jsfiddle.net/DinoMyte/uwsutrz7/2/ – DinoMyte

+0

工作也適合我。 –

回答

1

由於您正在使用jQuery,因此您可以嘗試使用jQuery來創建DOM元素。就我個人而言,我覺得使用HTML字符串創建元素很容易出錯,使代碼很難讀取和調試。我創建了使用jQuery時遇到問題的<a></a>元素,並使用從字符串創建的元素追加其包含的元素。

var inner = '<div class="row">'+ 
       '<div class="col-xs-9 col-sm-8">'+ 
        '<table class="w100p text-success b">'+ 
         '<tr>'+ 
          '<td width="50%" class="nowrap pad10rt">'+ '<i class="fa fa-clock-o fa-lg valignMid xtraSm"></i> 4:00 pm'+'</td>'+ 
          '<td width="50%"><i class="fa fa-user fa-lg valignMid xtraSm"></i> x '+part+'</td>'+ 
         '</tr>'+ 
        '</table>'+ 
       '</div>'+ 
       '<div class="col-xs-3 col-sm-4 text-right">'+ 
        '<i class="indicator fa fa-fw fa-chevron-right"></i>'+ 
       '</div>'+ 
      '</div>'; 


var attribs = { 
    "class": "txt333 clps", 
    "data-toggle": "collapse", 
    "aria-expanded": false, 
    "href": "#collapse_reqConf" + sent, 
    "aria-controls": "collapse" + sent, 
    "data-parent": "#accordion_reqConf" + sent 
}; 


var elStr = $('<a>').attr(attribs).append($(inner)).prop('outerHTML'); 
console.log(elStr);