javascript - 原型(prototype)切换 - 两个实例变得困惑

Question

我有两个使用toggle() 的实例。所以在代码中有这个链接:

<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>

我遇到的问题是当我切换“显示全部”链接时 - 它会使“完全独立的链接”无法使用。有时它甚至会打开显示/隐藏 #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);" 以避免需要停止事件.