Ich versuche, Text von einer ID in einer anderen anzuzeigen, aber es funktioniert nur einmal. Also lade ich die Seite, bewege den Mauszeiger über den Titel mit der ID und dann über eine andere und sie bleibt einfach auf der ersten.
HTML
<div class="cp_widget_content" id="portfolio_content_area">
<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';
<div id="title_hover">Test</div>
JQuery
jQuery(document).ready(function()
{
(function ($)
{
$('#portfolio_title_area').hover(function()
{
$('#title_hover').text($('#portfolio_title_area').text());
});
})(jQuery);
});
6 Antworten
Für mich bedeuten Ihre Kommentare, dass Sie mehrere Titel haben, die beim Schweben in #title_hover angezeigt werden sollten. Wenn ja, verwenden Sie keine IDs, sondern einen Klassenselektor, z.
jQuery(function ($) {
// keep a reference to the target, so we
// don't need to query on every enter/leave
const $title = $('#title_hover');
// store original text
const fallback = $title.text();
$('.cp_widget_title').on({
// on enter
'mouseenter': function() {
// overwrite with text from hovered element
$title.text($(this).text());
},
// on leave
'mouseleave': function() {
// reset to previous text
$title.text(fallback);
},
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b class="cp_widget_title">Some title 1</b>
<b class="cp_widget_title">Some title 2</b>
<b class="cp_widget_title">Some title 3</b>
<b class="cp_widget_title">Some title 4</b>
<div id="title_hover">Test</div>Nebenbei bemerkt, in Bezug auf das Boilerplate, um einen Verweis auf jQuery als $ im noConflict - Modus zu erhalten, anstatt:
jQuery(document).ready(function() {
(function ($) {
// code
})(jQuery);
});
Sie können Folgendes verwenden, was äquivalent ist:
jQuery(function ($) {
// code
});
Fügen Sie die Funktion mouseleave hinzu
jQuery(document).ready(function()
{
(function ($)
{
$('#portfolio_title_area').hover(function()
{
$('#title_hover').text($('#portfolio_title_area').text());
});
$('#portfolio_title_area').mouseleave(function()
{
$('#title_hover').text('Test');
});
})(jQuery);
});
Sie verwenden IIFE (d. H. Sofort aufgerufener Funktionsausdruck).
((function ($)
{
})(jQuery);
Dies wird nur einmal ausgeführt und das auch noch bevor document.ready ausgeführt wird. Es funktioniert also nur einmal.
Sie können es sogar ohne IIFE tun.
Es liegt daran, dass Sie es einmal ändern und es niemals bitten, es zurück zu ändern, wenn Sie mit dem Schweben fertig sind:
jQuery(document).ready(function()
{
(function ($)
{
var text = $('#title_hover').text();
$('#portfolio_title_area').mouseover(function()
{
$('#title_hover').text($('#portfolio_title_area').text());
});
$('#portfolio_title_area').mouseout(function()
{
$('#title_hover').text(text);
});
})(jQuery);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cp_widget_content" id="portfolio_content_area">
<b class="cp_widget_title" id="portfolio_title_area">'.get_the_title().'</b>';
<div id="title_hover">Test</div>Verwenden Sie mouseover und mouseout anstelle von hover.
Versuchen Sie diesen Code.
jQuery(document).ready(function()
{
(function ($)
{
$('#portfolio_title_area').hover(function()
{
$('#title_hover').text($('#portfolio_title_area').text());
}, function() {
$('#title_hover').text('');
});
})(jQuery);
});
function disp(idname)
{
var x=document.getElementById(idname).innerHTML;
document.getElementById("title_hover").innerHTML=x;
}
function def()
{
document.getElementById("title_hover").innerHTML="Test";
}<div class="cp_widget_content" id="portfolio_content_area">
</div>
<b class="cp_widget_title" id="portfolio_title_area" onmouseover="disp(this.id)" onmouseout="def()">'.get_the_title().'</b>';
<br><br><br><hr>
<div id="title_hover">Test</div>
<hr>JScript-Version ...