나름 재밌는 js

기존 답 코드 

let list_zone = document.getElementById('inner_list');
let ul_li = list_zone.children;

ul_li = [...ul_li];
console.dir(ul_li[0]);
let bigPhoto = document.querySelector('#photo').children[0];
ul_li.map((element, index) => {
  let aTag = element.children[0];
  aTag.onclick = () => {
    bigPhoto.src = aTag.href;
    console.log(aTag.href);

    return false;
  };
});

//이전,다음 버튼을 클릭할떄마다 <ul>이 100만큼 증가 또는 감소되어 좌우측으로 이동
let m_num = 0; //이동한 횟수

//다음버튼 클릭했을때마다 <ul>이 100px만큼 좌측으로 이동해야한다.

let n_btn = document.querySelector('#next_btn');
n_btn.onclick = () => {
  if (m_num >= ul_li.length - 3) return false;
  m_num++;
  list_zone.style.marginLeft = -100 * m_num + 'px';
  return false; // #으로 이동하는거 해제
};

let n_num = 0; //이동한 횟수
let b_btn = document.querySelector('#before_btn');
b_btn.onclick = () => {
  if (m_num <= 0) return false;
  m_num--;
  list_zone.style.marginLeft = -100 * m_num + 'px';
};

 

내가 바꾼 코드

const bigImg = document.querySelector('#gallery #photo img');
const smallImgs = document.querySelectorAll('#inner_list a');

function handleClickSmallImgs(param) {
  //   console.dir(param);
  param.preventDefault();
  bigImg.src = this.href;
}

smallImgs.forEach((e) => {
  e.addEventListener('click', handleClickSmallImgs);
});

// 버튼구현
const btns = document.querySelectorAll('.btn_wrap a');
const smallImgBox = document.querySelector('#inner_list');
let m_num = 0; //버튼누른횟수

function handleClickBtn() {
  if (this.id === 'next_btn') {
    if (m_num >= smallImgs.length - 3) return false;
    m_num++;
  } else {
    if (m_num <= 0) return false;
    m_num--;
  }
  smallImgBox.style.marginLeft = `${-100 * m_num}px`;
  return false; //#으로 가는거 방지
}

btns[0].addEventListener('click', handleClickBtn);
btns[1].addEventListener('click', handleClickBtn);

 

1. 기존 답 코드는 버튼마다 클릭 이벤트를 따로따로 줬지만 나는 하나의 event listener를 이용해서 두개의 버튼 다 쓸 수 있게 해서 중복코드를 줄였다. 

2. 작은 사진 클릭하면 큰사진영역 클릭된 사진으로 바꾸기에서 a tag click이벤트 설정할때 event listener를 써서 a태그의 기본값(특정 링크로 이동) 제거를 return false말고 preventDefault를 써봤다.

3. 굳이 리스트를 불러와서 배열로바꾸고 작업하는 거 보다 처음부터querySelector로 nodelist로 불러오면 forEach 쓸 수 있어서 편하고 코드도 줄어서 더 나은 거 같다...

 

코드를 좀더 효율적으로 바꾸는 거 너무 재밌음ㅎㅎ

쾌감 쩐당