현상
Element 클릭 시 숨겨진 div를 보여주는 기능 구현 과정에서 아래와 같이
document.querySelectorAll
로 원하는 Element를 가져와서
forEach
로 각각의 addEventListener
를 추가했다.
이후 브라우저에서 각 Element 클릭 시 show-detail
class가 toggle되지 않았다.
const details = document.querySelectorAll('.col');
details.forEach(function (detail) {
const btn = detail.querySelector('.card');
btn.addEventListener('click', function () {
detail.classList.toggle('show-detail')
})
})
원인
document.querySelectorAll 로 원하는 Class를 가져오는 과정에서 details
를 log 로 찍어보니 길이가 0 인 비어있는 값이 출력.
처음 로딩되었을 때 listing 함수를 호출하여 Ajax 데이터를 불러오는데
listing 함수 외부에서 해당 코드를 작성하여 elements가 생성되기도 전에 Selector를 실행시켜 Class를 가져오지 못했다.
<script>
$(document).ready(function () {
listing();
});
function listing() {
$('#cards-box').empty()
$.ajax({
type: 'GET',
url: '/restaurant',
data: {},
success: function (response) {
let rows = response['restaurant']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let category = rows[i]['category']
let image = rows[i]['image']
let star = rows[i]['star']
let id = rows[i]['id']
let address = rows[i]['address'].split("지번")[0]
let star_image = '⭐'.repeat(star)
let temp_html = `<div class="col">
<div class="card h-100">
<img src="${image}" class="card-img-top">
<div class="card-header">
<h5 class="card-name">${name}</h5>
<p>${star_image}</p>
<div class="card-body">
<hr/>
<p class="card-category">카테고리 : ${category}</p>
<p class="mycomment">한줄평 : ${comment}</p>
<p class="myadrress">주소 : ${address}</p>
</div>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
// listing() 함수 외부에 작성
const details = document.querySelectorAll('.col');
console.log(details)
details.forEach(function (detail) {
const btn = detail.querySelector('.card');
btn.addEventListener('click', function () {
detail.classList.toggle('show-detail')
})
})
해결
느낀점