iT邦幫忙

0

程式大概如下

$("#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完美地被引號刮起來而不會被影響,且也不確定這樣做對不對或完不完整(因為一直報錯我連測試都沒辦法測),
想請一下大神幫小弟解答一下感謝

2
listennn08
iT邦新手 4 級 ‧ 2019-10-01 10:34:28
'<select class="form-control volNo'+i"' name="No+i">'
'<select class="form-control volNo'+i+'" name="No'+i+'">'

應該是這個問題吧
因為我沒看到你的ID

看更多先前的回應...收起先前的回應...

黑丟,不過我這邊有個疑問
理論上這段畫面在編譯器上不是應該要全部都同個顏色嗎?
就是都是字串的那個顏色

你的變數不是字串 所以不會是同一個顏色
''""刮起來的顏色才會一樣

喔對吼,我寫到昏頭了==
感謝您:)

小魚 iT邦大師 1 級 ‧ 2019-10-01 10:44:34 檢舉

有聽過開發人員工具嗎?

F12?

5
dragonH
iT邦大師 1 級 ‧ 2019-10-01 10:43:30

codepen

除了

'<select class="form-control volNo'+i+"' name='No"+i+"'>'"

的問題

還有

`<option value="${item.no}">${item.name}</option>`

你應該是想用 ES6 的 template literal 吧

是的話

需要用 `` 而不是 ''

看更多先前的回應...收起先前的回應...

可以請問一下這兩這有什麼差異嗎?
不好意思剛接觸這一塊

dragonH iT邦大師 1 級 ‧ 2019-10-01 10:46:43 檢舉

tryit163281

你可以看你輸出的結果就知道了

`<option value="${item.no}">${item.name}</option>`

中的

${item.no} ${item.name}

會替換成變數

用 '' 的話

則是輸出一般字串

所以你的

'</select> <span class='+field+'></span>'

也可以寫成

`</select> <span class="${field}"></span>`

就可以不用 用 + 號 組字串

比較易讀

多謝指導,我馬上試試看

dragonH iT邦大師 1 級 ‧ 2019-10-01 10:55:23 檢舉

查了一下

你好像有 jsp 的語法在

所以你可能要確認一下

是不是真的是用到 template literal

還是那是 jsp 的語法

我是使用jsp語法沒錯,我正在做mvc的view部分,要新增一個物件可以點選button之後增加select,然後用JQUERY儲存這select的資料成JSON檔,回傳到service的地方

2
ccutmis
iT邦高手 9 級 ‧ 2019-10-01 12:04:16

參考看看
用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>

我要發表回答

立即登入回答