程式大概如下
$("#Board").prepend(
'<div class="form-group col-sm-6 clearfix">'
+'<label class="col-lg-4 control-label">選擇</label>'
+'<div class="col-lg-8">'
+'<div class="fg-line">'
+'<div class="select">'
+'<select class="form-control volNo'+i"' name="No+i">'
+'<option value="">-請選擇-</option>'
+'<c:forEach items="${List}" var="item">'
+'<option value="${item.no}">${item.name}</option>'
+'</c:forEach>'
+'</select> <span class='field' ></span>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'<div class="col-lg-3">'
+'<button id="btnPut" type="button" class="btn waves-effect">新增</button>'
+'</div>'
);
我想設一個變數i每當我按下按鈕時就會新增上面這串東西,而id會隨之增加,但我現在卡住了,
我不知道要如何讓ID完美地被引號刮起來而不會被影響,且也不確定這樣做對不對或完不完整(因為一直報錯我連測試都沒辦法測),
想請一下大神幫小弟解答一下感謝
'<select class="form-control volNo'+i"' name="No+i">'
'<select class="form-control volNo'+i+'" name="No'+i+'">'
應該是這個問題吧
因為我沒看到你的ID
除了
'<select class="form-control volNo'+i+"' name='No"+i+"'>'"
的問題
還有
`<option value="${item.no}">${item.name}</option>`
你應該是想用 ES6 的 template literal 吧
是的話
需要用 `` 而不是 ''
可以請問一下這兩這有什麼差異嗎?
不好意思剛接觸這一塊
你可以看你輸出的結果就知道了
`<option value="${item.no}">${item.name}</option>`
中的
${item.no} ${item.name}
會替換成變數
用 '' 的話
則是輸出一般字串
所以你的
'</select> <span class='+field+'></span>'
也可以寫成
`</select> <span class="${field}"></span>`
就可以不用 用 + 號 組字串
比較易讀
參考看看
用jQuery.noConflict()把jQuery的'$'改成'jq',避免跟ES6的字串模板${i}搞混
demo url: http://www.web3d.url.tw/ITHELP/JQUERY_20191001/
code:
<div id="wrap">
<h1 class="testJQueryNoConflict">
Oops! jQuery.noConflict() is not working.
</h1>
<div id="demoDiv">THIS IS A DIV</div>
<button id="testBtn">prependToDiv</button>
</div>
<style>
#wrap{width:90vw;margin:0 auto;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
let i=0;
let optionStr='<option value="1">1</option><option value="2">2</option>';
let templateStr=(i,optionStr)=>{
return `<div class="form-group col-sm-6 clearfix">
<label class="col-lg-4 control-label">(i:${i})選擇</label>
<div class="col-lg-8">
<div class="fg-line">
<div class="select">
<select class="form-control volNo${i}" name="No${i}">
<option value="">-請選擇-</option>
${optionStr}
</select> <span class='field' ></span>
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<button id="btnPut" type="button" class="btn waves-effect">新增</button>
</div>
</div>
`;
};
var jq = $.noConflict();
jq(".testJQueryNoConflict").text("Great! jQuery.noConflict works!");
jq("#testBtn").click(function() {
jq("#demoDiv").prepend( templateStr(i,optionStr) );
i++;
});
</script>