자바스크립트 질문입니다. - 컴퓨터공학 채널

컴퓨터공학 채널

알림 알림 중 알림 취소

구독자 3336명 알림수신 25명 @SeworL

컴퓨터를 좋아하는 사람들의 모임

웹 자바스크립트 질문입니다.

자료구조

추천 0 비추천 0 댓글 5 조회수 236 작성일 2021-12-21 12:36:56

https://arca.live/b/programmers/40848667

여기서 각 숫자별로 버튼을 누르면 그 숫자에 해당하는 div외에는 숨기고 싶은데 이것을 어떻게 js 함수로 구현을 해야할지 모르겠습니다.

댓글 [5] 글쓰기

빅데이터에_알고리즘을_사용한닉

2021-12-21 13:36:55 답글

쉽게 이해할 수 있도록 약간 안티패턴이 들어간 방법이긴한데 body end태그 바로 위에 script 넣거나 document DOMContentLoaded 이벤트에 저 코드 넣으면 돼.

설명하면 클래스 search-intro에 있는 div 가져와서, 이벤트에 할당한 value가 falsy한 값이면 해당 엘리먼트에 스타일 태그로 display:block을 넣어서 전부 안보이게, 반대인 경우엔 value랑 일치하는 id를 가진 경우엔 block 아니면 none처리.

    const divs = document.body.querySelectorAll('.search-intro>div');
    const displayGrade = (value) => {
      divs.forEach((el) => {
        el.style = !value || el.id === value
          ? 'display: block;'
          : 'display: none';
      });
    };

el.style is available for purchase - Sedo.com

*수정됨

쉽게 이해할 수 있도록 약간 안티패턴이 들어간 방법이긴한데 body end태그 바로 위에 script 넣거나 document DOMContentLoaded 이벤트에 저 코드 넣으면 돼.

설명하면 클래스 search-intro에 있는 div 가져와서, 이벤트에 할당한 value가 falsy한 값이면 해당 엘리먼트에 스타일 태그로 display:block을 넣어서 전부 안보이게, 반대인 경우엔 value랑 일치하는 id를 가진 경우엔 block 아니면 none처리.

    const divs = document.body.querySelectorAll('.search-intro>div');
    const displayGrade = (value) => {
      divs.forEach((el) => {
        el.style = !value || el.id === value
          ? 'display: block;'
          : 'display: none';
      });
    };

펼쳐보기▼

빅데이터에_알고리즘을_사용한닉

2021-12-21 14:16:12 답글

안티패턴이라고 말한 이유는 저 코드가 엘리먼트 목록 순회하면서 스타일을 직접적으로 바꿔버려서 그런거임.

요소를 하나만 바꾸는게 아니라 여러개를 바꾸는 경우엔 될 수 있는대로 직접적으로 스타일 바꿔서 리페인트나 리플로우가 여러번 일어나는 것 보다는  부모 요소를 클론해서 변경할 자식요소들 한번에 바꿔놓고 부모 요소를 교체하는 방향이 바람직한 편임.

dom 접근은 항상 비용이 많이 드는 작업이란 점을 유의해야해.

아래는 렌더링 최적화 버전

let searchIntro = document.body.querySelector('.search-intro');
    const displayGrade = (value) => {
      const searchIntroCopy = searchIntro.cloneNode(true);
      const divs = searchIntroCopy.querySelectorAll('div');

      divs.forEach((el) => {
        el.style = el.style = !value || el.id === value
          ? 'display: block;'
          : 'display: none';
      });

      searchIntro.parentNode.replaceChild(searchIntroCopy, searchIntro);
      searchIntro = searchIntroCopy;
    };

el.style is available for purchase - Sedo.com

*수정됨

안티패턴이라고 말한 이유는 저 코드가 엘리먼트 목록 순회하면서 스타일을 직접적으로 바꿔버려서 그런거임.

요소를 하나만 바꾸는게 아니라 여러개를 바꾸는 경우엔 될 수 있는대로 직접적으로 스타일 바꿔서 리페인트나 리플로우가 여러번 일어나는 것 보다는  부모 요소를 클론해서 변경할 자식요소들 한번에 바꿔놓고 부모 요소를 교체하는 방향이 바람직한 편임.

dom 접근은 항상 비용이 많이 드는 작업이란 점을 유의해야해.

아래는 렌더링 최적화 버전

let searchIntro = document.body.querySelector('.search-intro');
    const displayGrade = (value) => {
      const searchIntroCopy = searchIntro.cloneNode(true);
      const divs = searchIntroCopy.querySelectorAll('div');

      divs.forEach((el) => {
        el.style = el.style = !value || el.id === value
          ? 'display: block;'
          : 'display: none';
      });

      searchIntro.parentNode.replaceChild(searchIntroCopy, searchIntro);
      searchIntro = searchIntroCopy;
    };

펼쳐보기▼

자료구조

2021-12-21 15:18:42 답글

감사합니다

펼쳐보기▼

유자차

2021-12-21 14:29:00 답글

보통 css로 선택된 항목 혹은 숨겨진 항목을 지정하는 class를 추가해서 display: none을 하던가 안 하도록 해 두고
클릭 시 element에 class를 추가하거나 제거하는 게 일반적임.

펼쳐보기▼

자료구조

2021-12-21 15:18:50 답글

감사합니다

펼쳐보기▼

댓글 작성

업로드 중

0초

녹음 중지 삭제

글쓰기

전체글 개념글

최근 최근 방문 채널

최근 방문 채널

전체 공지사항 질문/조언 읽을거리

번호 제목

작성자 작성일 조회수 추천

광고 광고 당근 빌런

공지 아카라이브 모바일 앱 이용 안내(iOS/Android)

*ㅎㅎ 2020.08.18 52646002

공지 컴퓨터공학 채널 규칙 (2023-10-05 개정)

SeworL 2023.10.05 3731

공지 빠르게 원하는 답변을 받기 위해 피해야 할 질문 방식

유자차 2022.07.02 5001

공지 신문고

SeworL 2023.10.07 2712

숨겨진 공지 펼치기(1개)

웹 웹사이트 운영할 때 질문 [19]

자료구조 2021.12.23 325 0

질문/조언 윈도우 10 메인보드 교체시 [3]

_이오 2021.12.23 195 0

질문/조언 SI SM 발 딛지 마라. 경력 인정 안 해준다. (feat. KOSA) [7]

갈 2021.12.23 2130 10

질문/조언 폰트의 이름을 찾습니다 [5]

ㅇㅇ 2021.12.22 247 0

초보자가 하기에 c++ vs java [9]

프로뉴비러 2021.12.22 303 0

질문/조언 컴퓨터 추천좀.. [2]

Pitohui 2021.12.22 277 0

질문/조언 26살 주니어 개발자 진로 조언 좀 해주실 수 있나요? [6]

ㅇㅇ (125.141) 2021.12.22 602 0

컴붕이 취직했습니다... [14]

네트워크 2021.12.22 382 4

질문/조언 안드로이드 코드 질문 [5]

쿡쿠림빵 2021.12.21 201 0

와 학부생 미친새끼들 멘탈깨진다... [7]

렌 2021.12.21 438 0

웹 innerHTML [object HTMLDivElement] 질문입니다. [7]

으악아 2021.12.21 1409 0

C/C++ '정수의 각 자릿수를 역순으로 출력하기' 질문드립니다. [10]

ㅇㅇ 2021.12.21 366 0

질문/조언 파이썬 계산기 구동 원리 질문 [11]

LGGP 2021.12.21 209 0

Python 파이썬 match에 대해서 들어본 적 있는 사람 있냐 [9]

ㅇㅇ (210.218) 2021.12.21 794 5

질문/조언 블루 스택이 안돌아가요 [5]

아아아아 2021.12.21 145 0

웹 자바스크립트 질문입니다. [5]

자료구조 2021.12.21 237 0

리눅스 우분투 멀티부팅으로 설치하는데 [13]

ㅇㅇ (211.222) 2021.12.21 538 0

질문/조언 코딩을 시작하고 갑자기 속이 울렁거리네요 [9]

코딩천재 2021.12.21 358 0

개인적으로 우선시하는 노트북 스팩 [4]

고기먹자 2021.12.21 234 2

질문/조언 고3 컴공 입학하는데 맥북써도되나요 [10]

ㅇㅇ (27.126) 2021.12.21 2278 0

Java 자바 interface 메소드 질문 [5]

능지가부족한인간 2021.12.20 224 0

물리 엔진 관련해서 책 읽어보려 하는데 추천할 만한거 있음? [1]

Se_worlP 2021.12.20 406 0

질문/조언 내가 지금 문제가 있는대 [7]

삽으로뻘짓하는사람 2021.12.20 239 1

질문/조언 C++ 색상 테마 질문 [5]

LGGP 2021.12.20 215 0

질문/조언 견적좀 물어봐도 될까?? [3]

USSR 2021.12.19 244 0

마이크로소프트 스토어 나만 이럼? [7]

ㅇㅇ (211.176) 2021.12.19 211 0

질문/조언 입문을 어떤 언어로 하는지는 별로 안중요함 [5]

ㅇㅇ (39.122) 2021.12.19 495 3

인공지능에 대해서 생각중인데 [15]

코딩천재 2021.12.19 306 0

질문/조언 컴공과 노트북 추천 [5]

ㅇㅇ (49.167) 2021.12.19 465 0

질문/조언 C++ 하기 전에 C언어 먼저 공부하는 게 낫죠? [5]

Euno 2021.12.18 364 0

글쓰기

전체글 개념글