Наложение 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

Потенциальным источником ошибок является то, что вы много раз используете один и тот же идентификатор для своих элементов 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