하나의 오버레이 요소에 여러 개의 트리거가있는 jQuerytools 오버레이

Question

모두 .. 나는 검색했지만 아직 답변을 찾지 못했습니다. 어쩌면 여기서 나를 도울 수 있습니다 ...

두 가지 (HTML) 목록이 있는데, "동물"과 "과일"이라고합시다. 각 목록에는 자식이 있고 자식 요소를 클릭하면 클릭 된 자식의 이름이있는 오버레이 요소가 표시됩니다. 지금까지 나는 "동물"목록에 대한 오버레이를 가질 수 있었지만 "과일"목록에 대해서는 아무 일도 일어나지 않았습니다. 여기

는

jQuery('ul#animalList > li').click(function(){ 
    anname = jQuery(this).html(); 
    anid = jQuery(this).attr('id'); 
    antext = '['+anid+'] '+anname; 
    jQuery('ul#animalList > li[rel]').overlay({ 
     mask:{color:'#666666',loadSpeed:100,opacity:0.8}, 
     onBeforeLoad:function(){jQuery('#anisel').html(antext);}, 
     oneInstance:false 
    }); 
}); 
jQuery('ul#fruitList > li').click(function(){ 
    funame = jQuery(this).html(); 
    fuid = jQuery(this).attr('id'); 
    futext = '['+fuid+'] '+funame; 
    jQuery('ul#fruitList > li[rel]').overlay({ 
     mask:{color:'#666666',loadSpeed:100,opacity:0.8}, 
     onBeforeLoad:function(){jQuery('#frusel').html(futext);}, 
     oneInstance:false 
    }); 
}); 

경우 [내가 jQuerytools 1.2.7를 사용하고 있습니다]

HTML

자바 스크립트

<ul id="animalList"> 
    <li id="1" rel="#aniover">tiger</li> 
    <li id="2" rel="#aniover">shark</li> 
    <li id="3" rel="#aniover">eagle</li> 
</ul> 
<ul id="fruitList"> 
    <li id="1" rel="#fruover">mango</li> 
    <li id="2" rel="#fruover">orange</li> 
    <li id="3" rel="#fruover">banana</li> 
</ul> 

<div class="modal" id="aniover"> 
    <h3>Animal Selected!</h3> 
    <span id="anisel"></span> 
</div> 
<div class="modal" id="fruover"> 
    <h3>Fruit Selected!</h3> 
    <span id="frusel"></span> 
</div> 

에게 .. 쉽게 이해할 수 있도록하기 위해 코드를입니다 동물 목록에서 "상어"를 클릭하면 오버레이가 작동합니다. 하지만 "오렌지"를 클릭하면 아무 일도 일어나지 않습니다. 누군가 제가 이걸 알아 내도록 도울 수 있습니까? 감사합니다.

Answer 1

마지막으로 그것을 발견! 한숨

우선, 두 번째 목록 ("#fruitList")이 jQuery 스크립트에 의해 생성 된 것에 대해 언급하지 않았다는 점에 유감스럽게 생각합니다.

해결 방법은 위에서 쓴 것처럼 외부의 목록 생성 함수에 오버레이 속성을 포함시켜야한다는 것입니다.

이

jQuery(document).ready(function(){ 
    createList(function(){ ... }); //list generation function for the fruit list 
    jQuery('#animalList li').click(function(){ ... }); //overlay for animal list 
    jQuery('#fruitList li').click(function(){ ... }); //overlay for fruit list 
}); 

가 내 작업 스크립트 :

jQuery(document).ready(function(){ 
    createFruitList(function(){ 
     ... //generate the fruit list 
     jQuery('#fruitList li').click(function(){ ... }); //overlay for fruit list 
    }); 
    jQuery('#animalList li').click(function(){ ... }); //overlay for animal list 
}); 

확인을 한 후, 그 모든 .. 사건이 닫혀 여기에 전체 스크립트의 그림 ...

이 내 이전 스크립트입니다 !

Answer 2

잠재적 인 오류의 원인은 li 요소에 동일한 id를 여러 번 사용하고 있다는 것입니다. 다른 속성을 사용하여 요소의 ID를 저장할 수 있습니다.

<ul id="animalList"> 
    <li data-id="1" rel="#aniover">tiger</li> 
    <li data-id="2" rel="#aniover">shark</li> 
    <li data-id="3" rel="#aniover">eagle</li> 
</ul> 
<ul id="fruitList"> 
    <li data-id="1" rel="#fruover">mango</li> 
    <li data-id="2" rel="#fruover">orange</li> 
    <li data-id="3" rel="#fruover">banana</li> 
</ul> 

-

jQuery('#animalList li').click(function(){ 
    anname = jQuery(this).html(); 
    anid = jQuery(this).attr('data-id'); 
    antext = '['+anid+'] '+anname; 
    jQuery('#animalList li[rel]').overlay({ 
     mask:{color:'#666666',loadSpeed:100,opacity:0.8}, 
     onBeforeLoad:function(){jQuery('#anisel').html(antext);}, 
     oneInstance:false 
    }); 
}); 
jQuery('#fruitList li').click(function(){ 
    funame = jQuery(this).html(); 
    fuid = jQuery(this).attr('data-id'); 
    futext = '['+fuid+'] '+funame; 
    jQuery('#fruitList li[rel]').overlay({ 
     mask:{color:'#666666',loadSpeed:100,opacity:0.8}, 
     onBeforeLoad:function(){jQuery('#frusel').html(futext);}, 
     oneInstance:false 
    }); 
}); 

나는 또한 당신의 리튬에 대한보다 효율적인 선택을 제안

: #fruitList 리는