동적 div ID 사용 방법

Question

너무 많은 답변을 보았습니다. jQuery에 대한 지식이 너무 희귀하기 때문에 관련성을 부여 할 수 없습니다. 그래서 저는 그냥 가서 물어볼 것입니다. 나는 당신이 모두 꺼리지 않기를 바란다!

$("#button1").mouseenter(function(){ 
    $("#a1").fadeIn('100', function() { }); 

    $("#button1").mouseleave(function(){ 
     $("#a1").fadeOut('100', function() {}); 
    }); 
}); 

내가 mouseenter에, 나는 해당 화살표를 활성화 할 여러 개의 버튼이 있습니다

그래서, 여기에 스크립트입니다.

#button2 to #arrow2 등의 스크립트를 반복하지 말고 어떻게 $() 비트에 깔끔한 변수를 넣고 작동시킬 수 있습니까? 간단하게 들리지만, 내 고밀도가 찾을 수없는 방법이있을 것입니다.

이 같은

<div id="buttons"> 
    <p><a href="#"><img src="images/1.png" name="button1" id="button1" /></a></p> 
    <p><a href="#"><img src="images/2.png" name="button2" id="button2" /></a></p> 
    <p><a href="#"><img src="images/3.png" name="button3" id="button3" /></a></p> 
    <p><a href="#"><img src="images/4.png" name="button4" id="button4" /></a></p> 
    <p><a href="#"><img src="images/5.png" name="button5" id="button5" /></a></p> 
    </div> 

<div class="arrow" id="a1"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a2"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a3"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a4"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a5"><img src="images/arrow.png" width="747" height="75" /></div> 
<div class="arrow" id="a6"><img src="images/arrow.png" width="747" height="75" /></div> 

Answer 1

해결책은 확장되지 않습니다.

dom의 각 요소에 대한 이벤트 처리기를 지정하고 있습니다.

이것은 jQuery에서 가지고있는 쇠고기 중 하나입니다. 이런 일을 잘못하고 쉽게 발에 몸을 쏠 수있게합니다.

이벤트 위임이 필요합니다.

기본적으로 개념은 당신이 거품을내는 이벤트를 수신하는 dom 트리에서 훨씬 더 높은 이벤트 처리기를 가졌다는 것입니다. 따라서 마우스 이벤트는 목록 항목 자체가 아닌 문서의 단일 이벤트 처리기에서 처리 할 수 ​​있습니다. 실제로 단지 버튼과 화살표 사이에 링크를 얻을 수있는 ID를 사용하고

$('body').on('mouseenter', '#buttons img', function (e) { 
    $('#a' + $(this).attr('id').slice(-1)).fadeIn(300); 
}); 

$('body').on('mouseleave', '#buttons img', function (e) { 
    $('#a' + $(this).attr('id').slice(-1)).fadeOut(300); 
}); 

주의 사항 :

는 다음과 같이해야한다 http://api.jquery.com/on/

귀하의 코드를 살펴 보자.id를 모두 건너 뛰고 요소가 상위 요소에있는 색인으로 이동하는 것을 고려할 수 있습니다.

작동 예는 여기에서 찾을 수 있습니다 : http://jsfiddle.net/GNs44/1/

Answer 2

뭔가 시작하는 데 있습니다 :

이

$("[id*=button]").mouseenter(function(){ 
    var t = $(this), 
     idnum = t.slice(-1); 

    $("[id=a" + idnum + "]").fadeIn('100', function() { 
    }); 
}).mouseleave(function(){ 
    var t = $(this), 
     idnum = t.slice(-1); 

    $("[id=a" + idnum + "]").fadeOut('100', function() { 
    }); 
}); 

Answer 3

이 오히려 ID를 사용하는 것보다, 버튼에게 클래스를 제공

이

는 (그것을 요구하는 사람들의 경우) HTML입니다.

HTML :

<button id="button1" class="hoverbutton" /> 
<button id="button2" class="hoverbutton" /> 

jQuery를 :

$(".hoverbutton").mouseenter(function() { 
     $(".arrowclass").fadeIn('100', function() { }); 
    }); 

$(".hoverbutton").mouseleave(function() { 
     $(".arrowclass").fadeOut('100', function() { }); 
    }); 

Answer 4

$(".buttonClass").mouseenter(function(){ 
    $(this).siblings('.aClass').fadeIn('100', function() { }); 

    $(".buttonClass").mouseleave(function(){ 
     $(this).siblings('.aClass').fadeOut('100', function() {}); 
    }); 
}); 

이를 사용 (또는 이와 유사한, 형제 자매가 적절한 선택을 사용하는 대신) 및 (aClass 및 buttonClass를 언급 클래스를 추가 할 수 있습니다)를 구성 요소에 추가합니다.

이 작품 예 : 당신이 버튼을 마우스를 가져 가면 otherwiese 모든 <a> 태그 아웃/페이드 것입니다 있기 때문에, div 태그 내부에 "그룹"그들에게 중요

<div> 
<button class="buttonClass">Description</button> 
<a class="aClass">Description</a> 
</div> 

하는 것으로.