jquery取動態ID

html5 jquery 網頁製作網頁排版網頁製作網頁 html javascript mvc

tryit 2019-10-01 10:28:30 ‧ 2657 瀏覽

程式大概如下

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

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

listennn08

iT邦高手 5 級 ‧ 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

回應 5
分享
檢舉

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

tryit iT邦研究生 4 級 ‧ 2019-10-01 10:37:23 檢舉

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

listennn08 iT邦高手 5 級 ‧ 2019-10-01 10:40:15 檢舉

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

tryit iT邦研究生 4 級 ‧ 2019-10-01 10:43:44 檢舉

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

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

有聽過開發人員工具嗎?

tryit iT邦研究生 4 級 ‧ 2019-10-01 10:49:42 檢舉

F12?

登入發表回應

dragonH

iT邦超人 5 級 ‧ 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 吧

是的話

需要用 `` 而不是 ''

回應 5
分享
檢舉

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

tryit iT邦研究生 4 級 ‧ 2019-10-01 10:44:27 檢舉

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

dragonH iT邦超人 5 級 ‧ 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>`

就可以不用用 + 號組字串

比較易讀

tryit iT邦研究生 4 級 ‧ 2019-10-01 10:49:58 檢舉

多謝指導，我馬上試試看

dragonH iT邦超人 5 級 ‧ 2019-10-01 10:55:23 檢舉

查了一下

你好像有 jsp 的語法在

所以你可能要確認一下

是不是真的是用到 template literal

還是那是 jsp 的語法

tryit iT邦研究生 4 級 ‧ 2019-10-01 11:03:45 檢舉

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

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 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>