jQuery를 사용하면 클릭 된 요소를 기반으로 다른 요소를 어떻게 선택합니까?

Question

작은 제목 하나에 질문으로 표현하기가 어렵습니다. 기본적으로

, 전 사업부가 있습니다

사용자가 클릭 할 수 있으며, 그 DIV를 클릭했을 때, 나는 다른 DIV가 비슷한 ID로 표시 할

<div class="sites" id="site1"></div> 

:

<div id="site1_desc" class="description_holder"> 

이전 div를 클릭 할 때 후자를 사용하도록 선택할 수있는 방법이 있습니까? 내가 그 위의 실 거예요 작업을 이해

$(document).ready(function(){ 
    $('.sites).click(function(){ 
     $(this&'_desc').css({visibility: "visible"}); 
    }); 
}); 

,하지만 난 이렇게하는 가장 좋은 방법이 무엇인지 확실하지 않다 : 나는 사이트 2, 3에 대해 동일한 DIV 콤보를, 4 등 내가 좋아하는 뭔가를 생각했다. 나는 그 질문이 이제 분명 해졌기를 바란다.

Answer 1

사용 :

$(document).ready(function(){ 
$('.sites').click(function(){ 
    $('#'+$(this).attr('id')+'_desc').css({visibility: "visible"}); 
}); 
}); 

Working Fiddle

Answer 2

id 대신이 this.id를 사용해야합니다. 이 이벤트 소스 오브젝트 ID를 문자열 "_desc"과 연결하십시오. 또한 선택 자의 시작 부분에서 id selector에 #을 사용해야합니다.

$(document).ready(function(){ 
    $('.sites').click(function(){ 
     $("#" + this.id + '_desc').css({visibility: "visible"}); 
    }); 
}); 

Answer 3

당신은 또한 당신이 선택에 견적을 누락, 클릭 항목의 ID를 얻기 위해 this.id를 사용하기 전에 #을 둘 필요가 있습니다 id selector.

$(document).ready(function(){ 
    $('.sites').click(function(){ 
    //.......^.................. 
     $('#'+this.id+'_desc').css({visibility: "visible"}); 
    //....^....^.......... 
    }); 
}); 

+가 클릭 된 요소에 데이터 속성의 대상을 지정 연결

Answer 4

사용될 수

<div class="sites" id="site1" data-target='site1_desc'></div> 

$(document).ready(function(){ 
    $('[data-target]').on('click', function(){ 
     $('[data-target=' + $(this).data('target') + ']').show(); 
    } 
}); 

... 다음은이있는 요소에 적용될 data-target. 이 패턴은 많은 인기 프론트 엔드 프레임 워크에서 사용됩니다. 예를 들어 트위터 부트 스트랩의 접을 수있는 메뉴.