jQuerytools覆盖，对一个覆盖元素具有多个触发器

大家。。 我到处找了，但还没有找到答案。也许你能帮我

我有两个（HTML）列表，让我们称之为“动物”和“水果”。每个列表都有一些子元素，当我单击一个子元素时，它将显示名为clicked child的覆盖元素。到目前为止，我能够覆盖“动物”列表，但“水果”列表什么都没有发生

下面的代码使其更易于理解

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>

如果我从动物列表中单击“shark”，则覆盖会起作用。但当我点击“橙色”时，什么也没发生。有人能帮我弄清楚吗？

---

谢谢

一个潜在的错误源是，您对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>

我还为您的li推荐了一个更有效的选择器：#水果列表li终于找到了！叹息

首先，很抱歉我之前没有提到第二个列表（“水果列表”）是由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
});

我的工作脚本：

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

---

好吧，就这些。。案件结案

谢谢你的回复，奥杜邦。。我试过你的建议，但还是不行。还有别的想法吗？无论如何，感谢

data-*

属性，我对HTML5的特性还是很陌生