JQuery 호출 내에서 여러 ID 참조하기

Question

Jquery를 처음 접한다면 대부분의 문제는 제가 사용하는 많은 다른 언어를 기반으로 한 가정으로부터 비롯된 것이라고 생각합니다. 지금 당장 의문은 HTML id를 절대적으로 통과하는 것입니다. 예를 들어, 아이디의 각기 다른 HTML의 여러 세트를 제공 :

<div id="navi1"> 
    <div class = "linker"> 
     <a href="javascript:void(0)"><img src="gfx/link1ver.png" /></a> 
     <div class="expand"></div> 
     <img src="gfx/divide1.png" /> 
    </div> 
    <div id = "content1"> 
     test 
    </div> 
</div> 

<script> 
    var a = ['#navi0', '#navi1', '#navi2']; 
    var b = ['#content0', '#content1', '#content2']; 

    $(a[0] + ' .expand').css({'background-color': '#017693', 'height': '50px'}); 
    $(a[1] + ' .expand').css({'background-color': '#01D092', 'height': '50px'}); 
    $(a[2] + ' .expand').css({'background-color': '#D0013F', 'height': '50px'}); 

    for(i = 0; i <= 2; i++) { 
     $(a[i] + ' a').click(function() { 

      for(j = 0; j <= 2; j++) { 
       if($(a[j] + ' .expand').css('height') == '300px') { 
        $(a[j] + ' .expand').animate({ 
         height: '0px' 
        }, 500); 
        $(b[j]).animate({ 
         width: '100px' 
        }, 500); 

       } 
      } 

      $(this).next().animate({ 
       height: '300px' 
      }, 500);  

      $(b[i]).animate({ 
       width: '500px' 
       }, 500);  

     });  
    } 


</script> 

이 모든 그냥 JQuery와 어떻게 작동하는지 테스트하는 것입니다. 질문에 관해서, 마지막 애니메이션은 현재 'this'또는 'this'의 부모가 아닌 id에 대해 수행하려고 시도합니다. 이 설정으로 어떻게 그곳에 갈 수 있으며 배열 'b'를 적절하게 사용하고 있습니까? 고유 한 콘텐츠 ID가 아닌 일반 클래스를 사용하는 것이 더 좋을까요?

나는 항상 좋은 코드에 대해 특히주의를 기울 였으므로 원하는 모든 팁을 제공합니다.

Answer 1

오히려 루프를 들어, 당신이 할 수와 함께 또 다시 같은 코드를 실행하는 것보다 클래스를 사용하고 jQuery가 동일한 클래스를 가진 여러 오브젝트에 동일한 코드를 자동으로 적용하도록한다.

첫째,이에 HTML을 변경

<div id="navi1" class="nav"> 
    <div class = "linker"> 
     <a class="toggle" href="javascript:void(0)"><img src="gfx/link1ver.png" /></a> 
     <div class="expand"></div> 
     <img src="gfx/divide1.png" /> 
    </div> 
    <div class="content"> 
     test 
    </div> 
</div> 

변경 사항은 최고 수준의 탐색 DIV에 클래스를 추가하고, 링크 및 내용에 클래스를 넣을 수 있습니다.

그런 다음 클릭에 응답하기 위해이 코드를 사용할 수 있습니다

$(".nav .toggle").click(function() { 
    var this$ = $(this); 
    var parent$ = this$.closest(".nav"); 
    // get all .expand elements that are not in the one we clicked on 
    $(".nav").not(parent$).find(".expand").each(function() { 
     var self = $(this); 
     if (self.css("height") == "300px") { 
      self.animate({height: "0px"}, 500); 
      self.closest(".nav").find(".content").animate({width: "100px"}, 500); 
     } 
    }); 
    // set the state of the one clicked on 
    this$.next().animate({height: "300px"}, 500); 
    parent$.find(".content").animate({width: "500px"}, 500); 
}); 

당신은 모든 루프를 더 있다는 것을 눈치 채지 못할 것이다. 단지 jQuery의 .each()을 사용하거나 jQuery가 수동으로 반복하지 않고 선택기와 일치하는 모든 항목에 대해 작동한다는 사실을 사용합니다.

이 코드에는 두 개의 섹션이 있습니다. 첫 번째 섹션은 클릭 한 항목이 아닌 .nav 항목에서 작동하며 두 번째 섹션은 클릭 한 항목 인 .nav에서 작동합니다. ID를 전혀 사용하지 않고 상위 .nav로 이동하고 해당 항목을 클래스 이름별로 찾아냅니다.

는 전체 HTML 페이지를 제어하는 ​​경우에, 나는 자바 스크립트보다는 초기 배경 색상과 높이를 설정하는 CSS를 사용하는 것이 좋습니다 것입니다 : 당신이 자바 스크립트와 함께해야 할 일을했을 경우

.nav {height: 50px;} 
#nav1 {background-color: #017693;} 
#nav2 {background-color: #01D092;} 
#nav3 {background-color: #D0013F;} 

, 당신은이를 사용할 수 있습니다 반복되는 코드를 피하고 테이블 구동 방식으로 만들려면 다음을 수행하십시오.

var naviSettings = [ 
    {sel: '#navi0', bColor: '#017693'}, 
    {sel: '#navi1', bColor: '#01D092'}, 
    {sel: '#navi2', bColor: '#D0013F'} 
]; 

for (var i = 0; i < naviSettings.length; i++) { 
    var item = naviSettings[i]; 
    $(item.sel + " .expand").css({"background-color": item.bColor, height: "50px"}) 
} 

Answer 2

를 사용하여 가입 :

$(b.join(',')) 

가 여기에 예를 참조하십시오

• http://jsfiddle.net/bZJAf/

Answer 3

좋아요, 그래서 jsFiddle을 만들고 코드를 수정했습니다. 핸들러를 묶기 위해 for 루프를 사용할 필요가 없다는 것을 알 수 있습니다. 모든 div에 고유 한 ID를 부여 했으므로 CSS를 사용하여 테두리와 배경색을 설정합니다 (결국 CSS가 사용하는 것입니다).

은 참조 : http://jsfiddle.net/GpEqA/1/

코드는 다음과 같이 진행됩니다

$(function() { 
    $('.link').click(function() { 
     $(".link").not(this).each(function() { 
      $(this).find("div.wrap").hide(); 
      $(this).find("div.expand").animate({ 
       height: "0px" 
      }, 300); 

      $(this).find("div.services").animate({ 
       width: "0px" 
      }, 300); 
     }); 

     $(this).find("div.expand").animate({ 
      height: "300px" 
     }, 500); 

     $(this).find("div.services").animate({ 
      width: "647px" 
     }, 500, "", function() { 
      $(this).find("div.wrap").fadeIn("slow"); 
     }); 
    }); 
});