jQuery를 사용하여 div의 끝 부분에 숫자 추가

Question

jQuery를 사용하여 간단한 addClass를 만들려고합니다. #science-panel-number div 위로 마우스를 가져 가면 .active 클래스가 #iphone-screen-number div에 추가됩니다.

$('#science-panel-1').hover(function(){ 
    $('#iphone-screen-1').addClass('active'); 
},function(){ 
    $('#iphone-screen-1').removeClass('active'); 
}); 

$('#science-panel-2').hover(function(){ 
    $('#iphone-screen-2').addClass('active'); 
},function(){ 
    $('#iphone-screen-2').removeClass('active'); 
}); 

$('#science-panel-3').hover(function(){ 
    $('#iphone-screen-3').addClass('active'); 
},function(){ 
    $('#iphone-screen-3').removeClass('active'); 
}); 

내 HTML :

여기 내 jQuery를하다

<div class="col-md-4"> 
<div id="science-panel-1" class="science-panel__item"> 
      Content goes in here! 
    </div> 
    <div id="science-panel-2" class="science-panel__item"> 
     Content goes in here! 
    </div> 
    <div id="science-panel-3" class="science-panel__item"> 
     Content goes in here! 
    </div> 
</div> 

<div class="col-md-4"> 
    div id="iphone-screen-1" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
    div id="iphone-screen-2" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
    <div id="iphone-screen-3" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
    <div id="iphone-screen-4" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
    <div id="iphone-screen-5" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
    <div id="iphone-screen-6" class="iphone-screen-item"> 
     <img src="IMG-url-here.jpg" alt="" /> 
    </div> 
</div> 

<div class="col-md-4"> 
    <div id="science-panel-4" class="science-panel__item"> 
     Content goes in here! 
    </div> 
    <div id="science-panel-5" class="science-panel__item"> 
     Content goes in here! 
    </div> 
    <div id="science-panel-6" class="science-panel__item"> 
     Content goes in here! 
    </div> 
</div> 

이 같은 스크립트를 수행하는 코드의 많은 것 같은 느낌이 든다. 스크립트 자체에 숫자를 추가 할 수있는 방법이 있습니까? #science-panel-1은 항상 #iphone-screen-1 등으로 연결됩니다.

Answer 1

이렇게하면 필요한 작업을 수행 할 수 있습니다. 그냥

$("[id^=science-panel-]").hover(function() { 
    // get the corresponding iphone-screen element id 
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-"); 
    $(iphoneScreen).addClass("active"); 
},function() { 
    var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-"); 
    $(iphoneScreen).removeClass("active"); 
}); 

Answer 2

내가 먼저 active 클래스가 반드시 필요한 경우 물어 것 ... 그들 모두 포함해야한다 ID가 science-panel-로 시작 요소에 핸들러를 적용? :hover pseudoclass를 사용해서 만 스타일링을위한 것이라면 CSS로 원하는 것을 얻을 수 있습니까? 당신이 어떤 이유로 .active 클래스를 필요로 할 경우

, 나는 좀 더 모든 과학 패널 .science-panel의 CSS 클래스를 가지고 모든 아이폰 화면이 .iphone-screen의 클래스를했다 그래서 일반적으로 마크 업을 변경합니다. 그럼 당신이 당신이 위로 마우스와 마우스를 떠날 때 해제 마우스가 들어가면으로의 클래스를 전환하고 .science-panel의 내부 .iphone-screen를 찾을 수

$('.science-panel').on('mouseenter mouseleave', function(e) { 
    $(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter'); 
}); 

처럼 보이게하기 위해 JS를 단순화 할 수있다.

편집 : 마크 업을 포함하여 답변을 업데이트 한 것을 보았습니다.이 답변은 iphone-screens이 과학 패널에 중첩되어 있다고 가정했기 때문에 당신이하지 않으면이 기능이 반드시 작동하지 않을 것입니다./중첩하지 마크 업

Answer 3

난 당신이 스크립트를 구동하는 데 필요한 데이터를 포함하는 마크 업을 변경하는 것이 좋습니다 수 :

<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div> 
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

이 한 번에 모든 과학 패널의 항목을 선택할 수 있습니다 :

를

$('.science-panel__item') 

하고 각각에 동일한 스크립트를 수행하면 속성과 선택을 변경하면

$('.science-panel__item').hover(function() { 
    $($(this).data('target')).addClass('active'); 
// ^^^^^^^^^^^^^^^^^^^^^^ 
// use the data-target attribute as a selector 
}, function() { 
    $($(this).data('target')).removeClass('active'); 
}); 

---

, 당신은 당신이 어떤 요소에 적용 할 수있는 재사용 가능한 기능이 있습니다 :

$('[data-hover-target]').hover(function() { 
    $($(this).data('hoverTarget')).addClass('active'); 
}, function() { 
    $($(this).data('hoverTarget')).removeClass('active'); 
});