이 자바 스크립트 코드는 어떻게 단축 할 수 있습니까? 여러 div 표시 숨기기

Question

이 코드는 어떻게 단축합니까? 각 CSS 선택기는 +1을 증가시킵니다. .mug (x)를 선택하지 않으면 모든 Bio의 div가 숨겨집니다.

감사

 <script type='text/javascript'> 
       $(document).ready(function() { 
        $(".mug1").click(function() { 
         $("#bios div").hide(); 
         $(".bio1").show();      
        });      
        $(".mug2").click(function() { 
         $("#bios div").hide(); 
         $(".bio2").show();      
        });      
        $(".mug3").click(function() { 
         $("#bios div").hide(); 
         $(".bio3").show();      
        });      

      }); 
     </script> 

     <h2>Meet the team</h2> 

     <div id="mugshots"> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug1"/> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug2"/> 
      <img src="images/img-mugshot.jpg" alt="mug" class="mug3"/> 
     </div> 

     <div id="bios"> 
      <div class="bio1"></div> 
          <div class="bio2"></div> 
          <div class="bio3"></div> 
        </div> 

Answer 1

그냥 인덱스를 사용하고 원하는만큼 추가

$('#mugshots>img').on('click', function() { 
    $("#bios div").hide(); 
    var myIndex = $(this).index("#mugshots> img"); 
    $("#bios> div").eq(myIndex).show(); 
}); 

이의 짧은 버전은 다음과 같습니다

을

$('#mugshots>img').on('click', function() { 
    $("#bios div").hide().eq($(this).index("#mugshots> img")).show();; 
}); 

Answer 2

가장 간단한 방법은 for 루프

$(document).ready(function() { 
    for (var i = 1; i <= 3; i++) { 
    $(".mug" + i).click(function() { 
     $("#bios div").hide(); 
     $(".bio" + i).show(); 
    });      
    } 
}); 

내가 생각 아니에요 여전히 더 좋은 방법이있을 수있다.

Answer 3

이 줄에 뭔가가 있습니까?

이에 HTML을 변경

:

<div id="bios"> 
     <div class="bio" data-id="1"></div> 
         <div class="bio" data-id="2"></div> 
         <div class="bio" data-id="3"></div> 
       </div> 

를 그런 다음 JS를 여기에 :

$(".mug").click(function() { 
        $("#bios div").hide(); 
        $(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();      
       }); 

당신이없이 원하는만큼 머그컵과 바이오스를 추가 할 수 있습니다이 방법을 더 이상 js를 추가해야합니다.

Answer 4

이 시도 :

$(document).ready(function() { 
    $("img[alt=mug]").each(function() { 
     $(this).click(function(){ 
      var id = $(this).attr("class").substr(3, 1); 
      $("#bios div").hide(); 
      $(".bio" + id).show(); 
     }); 
    }); 
}); 

Answer 5

처음 수배 지금의 첫 번째 바이오, 두 번째 바이오와 두 번째 수배와 함께가는 가정하고 .EQ()와 mugshots의 인덱스를 사용합니다.

http://api.jquery.com/eq/

또한, 오히려 각 업데이트에 대한 모든 바이오스에서 숨기기를 호출하는 것보다 활성 바이오 추적하기 위해 클래스를 사용합니다.

JS :

$(document).ready(function() { 
    $('#mugshots img').click(function() { 
    $('#bios .active').hide().removeClass('active'); 
    $('#bios div').eq($(this).index()).show().addClass('active'); 
    }); 
}); 

HTML :

<h2>Meet the team</h2> 

    <div id="mugshots"> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
     <img src="images/img-mugshot.jpg" alt="mug"/> 
    </div> 

    <div id="bios"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div>