jQuerytools наслагване с множество тригери към един елемент на наслагване

всички.. Търсих наоколо, но все още не съм намерил отговора. може би можете да ми помогнете тук...

Имам два (HTML) списъка, нека го наречем „животни“ и „плодове“. всеки списък има някакво дете и когато щракна върху дъщерен елемент, той ще покаже наслагвания елемент с името на щракнато дете. досега успях да имам наслагване за списъка с "животни", но за списъка с "плодове" нищо не се случи.

ето кода за по-лесно разбиране..

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>

Javascript [Използвам jQuerytools 1.2.7]

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
    });
});

ако щракна върху "акула" от списъка с животни, наслагването работи. но когато щракна върху "оранжево", нищо не се случи. може ли някой да ми помогне да разбера това? Благодаря


jquery jquery-tools
person psychonsky    schedule 19.07.2012    source източник

Отговори (2)


arrow_upward
0
arrow_downward

Потенциален източник на грешки е, че използвате много пъти едно и също id за вашите li елементи. Можете да използвате друг атрибут, за да съхраните идентификатора на вашия елемент.

<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
    });
});

Също така предлагам по-ефективен селектор за вашия li: #fruitList li

person odupont    schedule 19.07.2012
comment
благодаря за отговора, odupont.. Опитах вашето предложение, но все още не работи. някаква друга идея? както и да е, благодаря за атрибута data-*, все още съм нов с функциите на HTML5 - person psychonsky; 20.07.2012

arrow_upward
0
arrow_downward

Най-накрая го намери! въздишка

Първо, съжалявам, че не споменах преди за втория списък ("#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
});

Добре тогава, това е всичко.. случаят е приключен!

person psychonsky    schedule 20.07.2012