1

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

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

2 回答 2

1

tl;博士;

工作演示

解释

这不起作用的原因是使用对象而不是局部范围并且变量被声明了两次。另一个问题是某些 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 类名广泛应用样式

    您的样式仅适用于id=togTriggercss 定义

    #togTrigger {...}

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

    .togTrigger {...}

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

    jsfiddle代码

    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);
};
    • 于 2013-03-07T00:20:32.757 回答
    0

    问题是您将要隐藏的段落和容器存储在全局变量中，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;
        };
    }
};
    于 2013-03-07T00:31:38.710 回答