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);
    });
3
Eric Graventein 18 Apr. 2018 im 10:12

6 Antworten

Beste Antwort

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
});
5
Yoshi 18 Apr. 2018 im 08:36

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);
});
1
לבני מלכה 18 Apr. 2018 im 07:19

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.

-1
Yoshi 18 Apr. 2018 im 08:38

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.

1
aMJay 18 Apr. 2018 im 07:17

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);
    });
2
Vince Llauderes 18 Apr. 2018 im 07:18
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 ...

1
AG_BOSS 18 Apr. 2018 im 07:25