1

大家..我已经四处寻找，但还没有找到答案。也许你可以在这里帮助我...

我有两个（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
    });
});

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

4

2 回答 2

0

一个潜在的错误来源是您多次为 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

于 2012-07-19T12:02:58.130 回答
0

终于找到了！叹

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

好的，这就是全部.. 结案！

于 2012-07-20T05:02:58.107 回答