Javascript Textfeld bewegen Sie den Mauszeiger auf der Maus über

Habe ich eine sehr einfache javascript-code, den ich brauche für meine website, aber es funktioniert nicht so wie ich wollte... Es wird über eine text-hover-box, die angezeigt und verschwindet, wenn ich den Mauszeiger über eine Schaltfläche. Der code funktioniert mit einem Knopf, aber ich brauche mehr von Ihnen. Es scheint, dass, wenn ich die zweite Schaltfläche mit der gleichen hoverbox-Effekt, den es leider nicht mehr (es bewegt sich nur der zweite text, wenn ich die Maus über eine der Schaltflächen). Meine Frage ist Gow kann ich die gleichen hoverbox-Effekt, aber mit anderen text auf jedes Feld, um mehrere Tasten. Hier ist, was ich so weit gekommen...

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

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

Sie sind mit der gleichen ID mehr als einmal. Die IDs sollen eindeutig identifizieren etwas.
Danke Lee für deine schnelle Antwort... Auf welche ID meinst du ?
id = "theTog" ...

InformationsquelleAutor Alex Timuş | 2013-03-07

1

tl;dr;

Arbeiten Demo

Erklärung

Dem Grund, dass dies nicht funktioniert ist, dass das Objekt verwendet wird, statt einen lokalen Bereich und eine variable deklariert, zweimal. Ein weiteres Problem ist, dass einige der DOM ist falsch und es ist Auswirkungen auf die Fähigkeit, Stil korrekt.
- Lokale Variablen verwenden, statt der Befestigung, um das Objekt
  
  Das Objekt, das halten der trigger-Funktion sollte nicht verwendet werden, um host-Elemente. Stattdessen machen lokale, um die trigger-Funktion. Ihr Anwendungsbereich bleibt lokal auf die Ereignisse, die Sie Heften sich an das übergebene element.
```
toggle: function (el) {
 var container = el.parentNode;
 var para = container.getElementsByTagName('p')[0];
 ...etc.
```
- Vermeiden, deklarieren Sie eine variable zweimal
  
  Sollten Sie die variable nicht deklariert werden, zweimal. Verwenden Sie nicht var um eine variable zu deklarieren, wenn es bereits erklärt, mit var. Dieser code
```
var l = ...
var l = ...
```
  werden sollte
```
var l = ...
l = ...
```
- Halten ids einzigartige
  
  Ids auf dom-Elemente eindeutig sein sollte, und nicht dupliziert.
  
  sollte vielleicht
```
<div id="theTog1"
<div id="theTog2"
```
- Verwendung von css-Klassennamen breit anwenden von Stilen
  
  Ihr Stil wird nur angewendet, um id=togTrigger mit der css-definition
```
#togTrigger {...}
```
  Können Sie zuordnen möchten class="togTrigger" auf die Elemente, die Sie möchten, um diese Funktion zu verwenden, und dann können Sie Ihre css-definition sein,
```
.togTrigger {...}
```
  In der end, es funktioniert alles so, arbeiten demo: 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);
};
```
Ich finde Eure Diskussion auf den tangentialen Probleme (immer noch wichtig, aber nicht relevant in diesem Fall) macht es schwieriger, um herauszufinden, was das eigentliche problem war (die Globale variable geteilt durch die toggle - Funktion).
So viel zur Deckung mit dieser Frage. Beachten Sie auch, dass Sie Ihre Geige nicht auf die fehlende Stil auf die zweite Umschalten. Darüber hinaus ist es vorgeschlagen, um alle code aus deinem jsfiddle weil die Seite ist unzuverlässig.
Super!!! Aber neben dem text selbst, ich brauche einen Titel in der box... Wie mache ich das jetzt?
Die Frage ist nicht über das CSS, das ist auch eine tangentiale Problem. Es gibt für mich keinen Grund zum einfügen von code aus der jsfiddle, die nicht relevant für die Frage. Das eigentliche problem war der code, den ich zeigte.
Sie konnte einfach in einem span zu tun. Vielleicht so etwas wie: <span class="togTitle">Title 1</span><br> im inneren des <p> element, aber vor dem text. Vielleicht mit diesem Stil: .togTitle { font-family: Arial; font-size: 150%; } Hier ist eine demo mit dem Titel: jsfiddle.net/upF8P/1

InformationsquelleAutor Travis J

Das problem ist, dass Sie die Speicherung der Absatz zu verstecken und die container in der globalen Variablen, die oVTog.container und oVTog.para. Daher, wenn Sie versuchen, verwenden Sie es für zwei verschiedene Knoten, Sie überschreiben sich gegenseitig.

Die einfachste Lösung ist zum speichern dieser Werte in den lokalen Variablen 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;
        };
    }
};

InformationsquelleAutor Juan Mendes

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.