html 자바스크립트 질문입니다. 단순한 문장들 을 간단하게 만들기

조회수 550회

이 코드를 단순하게 for문으로 바꾸고싶은데 바꾸는 방법 알고싶어요. 다른 방법으로도 줄일 수 있는 방법도 알고싶어요

  $(function(){
        $('#main_a1').click(function(){
            $('#main_content1').show();
        });

        $('#main_a2').click(function(){
            $('.main_content_wrap').hide();
            $('#main_content2').show();
        });

        $('#main_a3').click(function(){
            $('.main_content_wrap').hide();
            $('#main_content3').show();
        });
       ....81까지 });

1 답변

  • 좋아요

    1

    싫어요
    채택 취소하기

    주어진 스크립트를 순회문으로 고치는 건 간단합니다.

    for (i = 1; i < 82; i++) {
        let eventTargetID = '#main_a' + i;
        let showTargetID = '#main_content' + i;
        $(eventTargetID).click(function(){
            $(showTargetID).show();
        });
    }
    

    그런데 이게 나중에 82개가 돼야 한다거나, 6만 개 정도가 돼야 한다거나, 하나도 없어야 한다거나, 그래서 없앴다가 새로 만든다거나, 13번째부터는 #main_vip13 형태로 가야 한다거나... 하면 확실히 그럴 때의 문제는 for만 가지고는 해결이 좀 어렵겠죠...?


    느낌상 탭 내비게이션을 구현하고 계신 거 같은데, 저라면 각 요소에 구체적인 필연적 연관성을 준 다음 스크립트에서는 그걸 '일반적으로' 참조할 거 같습니다. 링크 붙인 Bootstrap 프레임워크가 그렇게 합니다.

    <!-- 이 예제에서는 id가 필요없습니다. 아래 스크립트 참고 -->
    <a class="main_clicker" data-what-to-show="#main_content3">3번탭</a>
    
    // 아무 엘리먼트에나 main_clicker 클래스와 data-what-to-show 속성을 주기만 하면 아래 코드가 적용됩니다.
    // 그 엘리먼트는 a여야 할 필요도 없고, 엘리먼트 id도 필요가 없지요.
    // 그런 엘리먼트가 82개 있건 82만개가 있건 다 똑같이 작동할 거고요.
    // 이런 차원에서 일반적이라고 할 수 있습니다.
    $('.main_clicker').click(function (e) {
        let id = $(e.target).data('whatToShow');
        $(id).show();
    });
    
    • 위에껀 훌룡하게 잘 적용 시켰습니다. 감사합니다! 다만 밑에부분은 적용시키지 못하였습니다. 일단 제가 만들고있는것은 게시판인데 제목을 a태그로 주어 a태그를 클릭하게되면 밑에
      이런식으로 해서 div부분에 컨텐츠를 출력하게 만드는 것이었습니다. 예를들면 4번 컨텐츠를 선택하고(4번컨텐츠가 보이다가) 3번 컨텐츠를 선택하면 4번 컨텐츠는 (hide)해야되고 3번컨텐츠를 (show)하게 작동시킬려고 합니다. 하지만 밑에는 3번 컨텐츠를 선택하고 4번컨텐츠를 선택하면 3번 컨텐츠가 hide 되지 않고 연속적으로 출력되고있는데 hide를 어디다 어떤식으로 코드를 줘야할지 알려주시면 감사하겠습니다!!
      박민준 2021.8.11 15:35
    • 말씀하시는 게시판은 아마도 아코디언일 것 같네요. 모든 본문을 일단 다 hide한 다음 → 표현하고 싶은 특정 본문만 show하면 됩니다. https://getbootstrap.com/docs/5.0/components/accordion/ 엽토군 2021.8.11 16:08
    • 이런 좋은 방법도 있군요 정말 감사합니다! 박민준 2021.8.11 17:25

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)