代码之家 › 专栏 › 技术社区 › psychonsky

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

jquery-tools jquery

psychonsky · 技术社区 · 14 年前

每个人我到处找了找,但还没有找到答案。也许你可以在这里帮我。。。

我有两个(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>

Java脚本 [我使用的是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
    });
});

如果我从动物列表中点击“鲨鱼”,覆盖效果会很好。但当我点击“橙色”时,什么也没发生。有人能帮我弄清楚吗? 谢谢

2 回复 | 直到 14 年前

odupont 14 年前

一个潜在的错误来源是您对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选择一个更有效的选择器: #水果清单李

psychonsky 14 年前

终于找到了! 叹气

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

好吧,就这样。。案件结案!