본문 바로가기

트러블 슈팅

for문 id값 따로주기 해결

문제점

for문 id값 따로주기에서 올린 문제를 해결해서 올린다.

몰랐던점

for(let i=0; i<arr.lenght; i++){
	let temp_html = `<div id="sampleId"></div>`
    $('#sampleBox').append(temp_html)
}

이 처럼 for문이 돌면서 id값이 여러개 붙게되면 각각의 id를 특정할수 없는데,

for(let i=0; i<arr.lenght; i++){
	let num = i+1
	let temp_html = `<div id="sampleId${num}"></div>`
    $('#sampleBox').append(temp_html)
}

이런식으로 for문에 돌아가고있는 i 값을 이용해서 각각의 아이디를 (sampleId1, sampleId2, sampleId3,....)특정할 수 있게 된다.

예를 들어, <div>를 hide하는 function을 호출하고 싶을땐

for(let i=0; i<arr.lenght; i++){
	let num = i+1
	let temp_html = `
    	<div id="sampleId${num}"></div>
        <button onclick="hide(${num})">숨기기</button>`
    $('#sampleBox').append(temp_html)
}

function hide(num){
	//()안에 들어가는것은 백틱
	$(`sampleId${num}`).hide
}

이렇게 <button>에도 고유번호를 지정해주면 여러개의 버튼을 일일히 만들 필요 없다.