자바스크립트 + 제이쿼리 입문 day 12

자바스크립트 + 제이쿼리 입문 day 12

 

---

버튼 클릭시 함수 실행하는 구현 

 

바닐라 버전과 j쿼리 버전 

 

      // 바닐라 버전 
      elBtn.forEach(function(btn, key) {
        btn.onclick = () => {
            elContent.innerHTML = `<figure><img src="${data[key].src}}"></figure>
                    <article>
                        <h2>${data[key].name}</h2>
                        <div>${data[key].detail}</div>
                    </article>`;
          };
      })


      
      // j쿼리 버전 
      $(".tab button").on('click', function () {
        let idx = $(this).index();
            let d =  `<figure><img src="${data[idx].src}}"></figure>
                    <article>
                        <h2>${data[idx].name}</h2>
                        <div>${data[idx].detail}</div>
                    </article>`;
             $('content').html(d);           

      });