Question

我有一个非常简单的javascript代码，我需要为我的网站，但它不能按我的意愿工作......它是关于一个文本悬停框，当我鼠标悬停按钮时会出现并消失。代码使用一个按钮，但我需要更多。似乎当我添加具有相同hoverbox效果的第二个按钮时它不再起作用（当我将鼠标悬停在任何按钮上时，它仅悬停第二个文本）。我的问题是，我可以添加相同的hoverbox效果，但每个框上有不同的文本，多个按钮。这是我到目前为止所得到的......

Javascript：

var oVTog = 
{
    toggle: function (el) 
    {
        oVTog.container = el.parentNode;
        oVTog.para = oVTog.container.getElementsByTagName('p')[0];  
        oVTog.para.style.display = "none";

        el.onmouseover = function () 
        {
            oVTog.para.style.display = '';
            return false;
        };

        el.onmouseout = function () 
        {
            oVTog.para.style.display = 'none';
            return false;
        };

        el.onclick = function () 
        {
            oVTog.para.style.display = oVTog.para.style.display == 'none' ? '' : 'none';
            return false;
        };
    }
};

window.onload = function () 
{
    var l = document.getElementById('togTrigger');
    oVTog.toggle(l);
    var l = document.getElementById('togTrigger2');
    oVTog.toggle(l);
};

CSS：

a 
{
    text-decoration: none;
 outline: none;
}

div#page 
{
    margin: 60px auto;
    border: 1px solid #dedede;
    width: 910px;
}

.TogWrap 
{
    width: 400px;
    padding: 22px;
}

#togTrigger 
{
    border: 1px solid #bebebe;
    padding: 7px 8px;
    background: #df7623;
    color: #fff;
}

.togContent  
{
    margin-top: 9px;
    border: 1px solid #bebebe;
    padding: 16px 10px 10px 10px;
    background: #ededed;
}

HTML：

<body id="bd">
    <div id="theTog" class="TogWrap">
        <a href="#" id="togTrigger">Lorem ipsum One</a>
        <p class="togContent">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
            Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
            convallis, sagittis vitae, convallis sit amet, lectus.
        </p>
    </div>

    <div id="theTog" class="TogWrap">
        <a href="#" id="togTrigger2">Lorem ipsum One</a>
        <p class="togContent">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. 
            Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada 
            convallis, sagittis vitae, convallis sit amet, lectus.
        </p>
    </div>
</body>

Answer 1

TL;博士;

的 Working Demo 的

解释

这不起作用的原因是使用对象而不是局部范围，并且变量被声明两次。另一个问题是一些DOM是不正确的，它正在影响正确应用样式的能力。

使用局部变量而不是将它们附加到对象

不应使用持有触发器功能的对象来托管元素。而是将它们设置为触发器功能的本地。它们的范围将保留在您附加到传入元素的事件的本地范围内。

toggle: function (el) { var container = el.parentNode; var para = container.getElementsByTagName('p')[0]; ...etc.

避免两次声明变量

不应将变量声明两次。如果变量已经使用var声明，请不要使用var来声明变量。这段代码

var l = ... var l = ...

应该成为

var l = ... l = ...

保持id唯一

dom元素上的ID应该是唯一的，而不是重复的。

应该是

<div id="theTog1" <div id="theTog2"

使用css类名来广泛应用样式

您的样式仅适用于带有css定义的id=togTrigger

#togTrigger {...}

您可能希望为要使用此功能的元素分配class="togTrigger"，然后您可以将css定义为

.togTrigger {...}

最后，这一切都是这样的，工作演示：http://jsfiddle.net/upF8P/

jsfiddle code

HTML

<div id="theTog" class="TogWrap"> <a href="#" id="togTrigger" class="togTrigger" >Lorem ipsum One</a> <p class="togContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. </p> </div> <div id="theTog" class="TogWrap"> <a href="#" id="togTrigger2" class="togTrigger">Lorem ipsum One</a> <p class="togContent"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. </p> </div>

CSS

a { text-decoration: none; outline: none; } div#page { margin: 60px auto; border: 1px solid #dedede; width: 910px; } .TogWrap { width: 400px; padding: 22px; } .togTrigger { border: 1px solid #bebebe; padding: 7px 8px; background: #df7623; color: #fff; } .togContent { margin-top: 9px; border: 1px solid #bebebe; padding: 16px 10px 10px 10px; background: #ededed; }

JS

var oVTog = { toggle: function (el) { var container = el.parentNode; var para = container.getElementsByTagName('p')[0]; para.style.display = "none"; el.onmouseover = function () { para.style.display = ''; return false; }; el.onmouseout = function () { para.style.display = 'none'; return false; }; el.onclick = function () { para.style.display = para.style.display == 'none' ? '' : 'none'; return false; }; } }; window.onload = function () { var l = document.getElementById('togTrigger'); oVTog.toggle(l); l = document.getElementById('togTrigger2'); oVTog.toggle(l); };

Answer 2

问题在于，您要将段落存储为隐藏，并将容器存储在全局变量oVTog.container和oVTog.para中。因此，当您尝试将它用于两个不同的节点时，它们会相互覆盖。

最简单的解决方案是将这些值存储在局部变量http://jsfiddle.net/Mchhs/

中

var oVTog = {
    toggle: function (el) {    
        var para  = el.parentNode.getElementsByTagName('p')[0];
        para.style.display = "none";

        el.onmouseover = function () {
            para.style.display = '';
            return false;
        };
        el.onmouseout = function () {
            para.style.display = 'none';
            return false;
        };
        el.onclick = function () {
            para.style.display = para.style.display == 'none' ? '' : 'none';
            return false;
        };
    }
};

Javascript文本框悬停在鼠标上方

2 个答案: