原型切换 - 两个实例变得混乱

Question

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

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

我遇到的问题是当我切换 "Show all" link - 它使 "Completely Independent link" 无法使用。有时它甚至会打开 shows/hides #div1?!?

不太确定发生了什么，但这两个实例肯定会混淆。

Answer 1

伙计，你的选择器全乱了。您不能只使用 $('div1')，因为那不会 return 任何东西。如果是 class 使用 $('.div1') 如果它是 id 使用 $('#div1').

也可以避免编写内联处理程序，这样更难阅读和注意到可能的错误。只需将所有这些放在一个单独的 javascript 文件中即可。

Answer 2

我认为正在发生的事情是您的点击事件在 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);" 以避免需要停止活动。

原型切换 - 两个实例变得混乱

Prototype toggle - two instances getting muddled

javascript

prototypejs