Jquery는 ID 번호를 기반으로 div를 선택합니다.

Question

JQuery를 발견하고 많은 연구 끝에 제 질문에 대한 답을 찾을 수 없습니다. 잘 표현하는 방법을 모르므 로요.

내 페이지에는 2 개의 눈금자 + 2 개의 안내선이 있고, 내 페이지에는 2 개의 안내선과 2 개의 단추가 표시되거나 숨겨져 있습니다. 작동하는 코드를 작성했지만 코드를 더 짧게하여 코드를 최적화하고 싶습니다.

는 여기있다 : 나는 알아낼 수 없습니다 무엇

$('#ruler-bg1, #ruler-bg2').hide(); 

$('#ruler1').click(function() { 
    $('#ruler-bg1').slideToggle(100); 
    $('#guide1').toggleClass('guide-on'); 
}); 

$('#ruler2').click(function() { 
    $('#ruler-bg2').slideToggle(100); 
    $('#guide2').toggleClass('guide-on'); 
}); 

는이 개 기능이 너무 #ruler+number에 클릭이 #ruler-bg+same_number 및 #guide+same_number을 보여줍니다 방법 그룹입니다. 이 같은

Answer 1

뭔가 수행해야합니다

$('#ruler1, #ruler2').click(function(){ 
    var num = this.id.substr(6); 

    $('#ruler-bg' + num).slideToggle(100); 
    $('#guide' + num).toggleClass('guide-on'); 
}); 

요소 사이에 구조적인 관계를 클릭하고 요소가 작용이 있다면 그것은 아마 더 좋은 것

...

Answer 2

initRuler(1); 
initRuler(2); 

function initRuler(id) { 
    $('#ruler' + id).click(function() { 
    $('#ruler-bg' + id).slideToggle(100); 
    $('#guide' + id).toggleClass('guide-on'); 
    }); 
} 

Answer 3

내가 추가 할을 모든 "통치자"에게 클래스 "통치자"를 할당하고 통치자에 대한 식별자로 ID를 사용합니다.

$('.ruler').click(function(){ 
    $('#bg-'+this.id).slideToggle(100); 
    $('#guide-'+this.id).toggleClass('guide-on'); 
});