javascript - Javascript text box hover on mouse over

Question

I have a very simple javascript code that I need for my website but it doesn't work as I wished... It is about a text hover box that apears and disapears when I mouseover a button. The code works with one button but I need more of them. It seems that when I add the second button with the same hoverbox effect it doesn't work any more (it hovers only the second text when I mouse over on any of the buttons). My question is hov can I add the same hoverbox effect but with different text on each box, to multiple buttons. Here is what I got so far...

The 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;
}

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

score 1 · Accepted Answer

tl; dr;

作業デモ

説明

これが機能しない理由は、ローカルスコープの代わりにオブジェクトが使用され、変数が2回宣言されているためです。もう1つの問題は、一部のDOMが正しくなく、スタイルを正しく適用する機能に影響を与えていることです。

オブジェクトにアタッチする代わりにローカル変数を使用する

トリガー関数を保持しているオブジェクトは、要素をホストするために使用しないでください。代わりに、それらをトリガー関数に対してローカルにします。それらのスコープは、渡された要素にアタッチするイベントに対してローカルのままになります。

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

変数を2回宣言することは避けてください

変数を2回宣言しないでください。var変数がすでにで宣言されている場合は、を使用して変数を宣言しないでくださいvar。このコード

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

になる必要があります

var l = ...
l = ...

idユニークに保つ

dom要素のIDは一意であり、重複してはなりません。

おそらく

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

cssクラス名を使用して、スタイルを広く適用します

id=togTriggerあなたのスタイルはcss定義でのみ適用されます

#togTrigger {...}

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);
};

score 0 · Accepted Answer

問題は、非表示にする段落とコンテナをグローバル変数に格納していることoVTog.containerですoVTog.para。したがって、2つの異なるノードに使用しようとすると、それらは互いに上書きします。

最も簡単な解決策は、これらの値をローカル変数に格納することです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 - Javascript text box hover on mouse over

2 に答える 2

Related

Reference