Question

大家.. 我已经四处搜索但尚未找到答案。也许你可以帮助我......

我有两个（HTML）列表，我们称之为“动物”和“水果”。每个列表都有一个子元素，当我单击子元素时，它将显示带有被点击子元素名称的overlay元素。到目前为止，我可以为“动物”列表添加叠加层，但对于“水果”列表，没有任何事情发生。

这是让它更容易理解的代码..

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

如果我从动物列表中点击“鲨鱼”，叠加层就会起作用。但当我点击“橙色”时，什么也没发生。有人可以帮我解决这个问题吗？感谢

Answer 1

潜在的错误来源是您对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
    });
});

我还建议你的li更有效的选择器： #fruitList li

Answer 2

终于找到了！叹息

首先，我很抱歉我之前没有提到第二个列表（“#fruitList”）是由jQuery脚本生成的。

解决方案是我应该在列表生成函数中包含overlay属性，而不是像我上面写的那样。这是整个剧本的插图...

我之前的剧本：

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

好的，那就是全部......结案了！

jQuerytools覆盖多个触发器到一个覆盖元素

2 个答案: