Question

我有两个使用toggle（）的实例。所以在代码中有这个链接：

<a href="#" onClick="$('div1').toggle(); return false;">Completely independent link</a>

随后是一个更复杂的show hide toggle区域：

<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show All</a>

然后反过来说：

<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show Less</a>

我遇到的问题是当我切换“全部显示”链接时 - 它使“完全独立链接”无法使用。有时甚至会打开show / hides＃div1 ?!？

不确定发生了什么，但这两个实例肯定变得混乱。

Answer 1

我认为正在发生的事情是您的点击事件正在冒充DOM并且它会影响其他元素 - 但我无法确定您的HTML结构。

话虽如此 - 我建议将所有内容放在单独的点击观察器中，它会从HTML中删除javascript，并使其更易于处理。

例如你的3个链接

<a href="#" onClick="$('div1').toggle(); return false;">Completely independent link</a>
<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show All</a>
<a href="#" onClick="$('showLessInfo').toggle();$('showAllInfo').toggle(); $('showAllInfoLink').toggle(); return false;">Show Less</a>

会改为

<a href="javascript:void(0);" id="link1">Completely independent link</a>
<a href="javascript:void(0);" id="showall">Show All</a>
<a href="javascript:void(0);" id="showless">Show Less</a>

并将其添加到您的head或js文件或页面上的某个位置

<script>
    document.observe('dom:loaded', function()
        $('link1').observe('click',function(){
            $('div1').toggle();
        });
        $('showall').observe('click',function(){
            $('showLessInfo').toggle();
            $('showAllInfo').toggle();
            $('showAllInfoLink').toggle();
        });
        $('showless').observe('click',function(){
            $('showLessInfo').toggle();
            $('showAllInfo').toggle();
            $('showAllInfoLink').toggle();
        });
    });

</script>

现在为了获得额外奖励，我将href="#"更改为href="javascript:void(0);"以避免需要停止此活动。

Answer 2

老兄，你的选择者都搞砸了。您不能只使用$('div1')，因为它不会返回任何内容。如果某个班级使用$('.div1')，并且如果它是id，请使用$('#div1')。

也许可以避免内联编写处理程序，阅读和注意可能的错误要困难得多。只需将所有内容放在一个单独的javascript文件中即可。

原型切换 - 两个实例混乱

2 个答案: