Ersetze Text in P Element beim Rollover eines anderen Divs

Ich kann nicht glauben, dass ich so viel Ärger damit habe; dachte das erste Ergebnis in Google würde es tun. Ich versuche nur, ein Bild zu überrollen und den Text in einem p-Element (Select a Module) durch einen anderen vordefinierten Text zu ersetzen. Wenn meine Maus das Bild verlässt, wird das p-Element auf einen Standardtext zurückgesetzt (Wählen Sie ein Modul).Ersetze Text in P Element beim Rollover eines anderen Divs

Das ist, was ich habe, aber keine Antwort vom Skript ...

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script> 
    $('p#module_1').bind('mouseover', function() { 
     $('p#module_main').text('Module 1'); 
    }); 
}); 
</script> 
</head> 
<body> 

<p id="module_main">Select a Module</p> 

<p id="module_1">Icon 1</p> 
<p id="module_2">Icon 2</p> 

</body> 
</html>

Quelle

2016-05-24 Victor Elias Rodriguez

Warum verwenden Sie doppelte '});'. Löschen Sie einfach einen. Und setzen Sie es in $ (Dokument) .ready (Funktion() {...}) –

Syntaxfehler zusätzliche '});' in Skript-Tag :) –

Das Problem ist, wenn Sie nach Ihrer bind() Funktion schließen. Sie müssen eine DOM-fähige Funktion hinzufügen.

$(document).ready(function(){ 
    $('p#module_1').bind('mouseover', function() { 
     $('p#module_main').text('Module 1'); 
    }); 
});

See this working fiddle

Quelle

2016-05-24 16:48:19

Danke Vincent, es funktioniert, aber was würde ich hinzufügen müssen Soll es auf "Wählen Sie ein Modul" zurückgesetzt werden, wenn ich von einem Symbol wegrollen? Danke noch einmal. –

Fügen Sie eine mouseout() -Funktion zum Beispiel hinzu: https://jsfiddle.net/j0kdg7f6/2/ –

Vielen Dank dafür –

Einige Punkte:

(1) .bind() in jQuery 1,7 und ersetzt mit .on() aufgegeben. Die Syntax ist praktisch identisch.

(2) .on() ist nur für Elemente erforderlich, die dem DOM hinzugefügt wurden, nachdem es bereits gerendert wurde. Mit anderen Worten, wenn Sie der Seite nach der ersten Anzeige neuen Inhalt hinzufügen, müssen Sie .on() verwenden. Sonst nicht notwendig. Siehe das mouseout Beispiel im unteren Code. Übrigens heißt das event delegation und es lohnt sich, darüber zu lesen.

(3) Wie Vincent bereits darauf hingewiesen hat, Sie document.ready müssen Sie den Code warten, um für alle DOM-Elemente, bevor vorhanden sein ereignisBeobachtung-Code auf diese Elemente zu binden. Andernfalls könnte das Javascript ausführen, bevor diese Elemente vorhanden sind und die Bindungen nicht erfolgreich sein werden (wie bindet der Code an etwas, das noch nicht existiert?) - was Sie sahen. Mouseover wurde nicht erkannt, da der Code das -Tag nicht beobachtet hat.

$(document).ready(function(){ 
 

 
    $(document).on('mouseover', '#module_1', function() { 
 
     $('#module_main').text('Module 1'); 
 
    }); 
 
    
 
    $('#module_1').mouseout(function() { 
 
     $('#module_main').text('ICON 1'); 
 
    }); 
 

 
}); //END document.ready

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p id="module_main">Select a Module</p> 
 

 
<p id="module_1">Icon 1</p> 
 
<p id="module_2">Icon 2</p>

Quelle

2016-05-24 17:03:40 gibberish

Vielen Dank für die Ausarbeitung –

Der Grund, es nicht funktioniert, weil die Bindefunktion, bevor Tags in den Dom geladen werden Ihre p aufgerufen wird. Aus diesem Grund funktioniert die obige Antwort, es verzögert die Ausführung der Bindefunktion, bis alle HTML-Elemente in dom geladen sind. Wenn Sie das Skript-Tag unter die p-Tags verschieben (und die letzte Zeile in Ihrem Skript-Tag entfernen), funktioniert es auch aufgrund der Reihenfolge der Ereignisse.

Quelle

2016-05-24 17:06:17

Ersetze Text in P Element beim Rollover eines anderen Divs

Antwort

Verwandte Themen