Question

我试图在另一个ID中显示文本，但它只能运行一次。所以我加载页面，将鼠标悬停在带有ID的标题上，然后另一个悬停在第一个页面上。

HTML

  jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
            $('#portfolio_title_area').hover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            });
        })(jQuery);
    });

的jQuery

// Stop watching.
watcher.close();

Answer 1

对我而言，您的评论表明您有多个标题，这些标题应在悬停时显示在#title_hover中。如果是这样，请不要使用id，使用类选择器，例如：

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>

在旁注中，关于样板文件在jQuery - 模式中获取$作为noConflict的引用，而不是：

jQuery(document).ready(function() { 
    (function ($) { 
        // code
    })(jQuery);
});

您可以使用以下内容，相当于：

jQuery(function ($) {
    // code
});

Answer 2

试试这段代码。

jQuery(document).ready(function() 
    { 
        (function ($) 
        { 
            $('#portfolio_title_area').hover(function()
            {
                $('#title_hover').text($('#portfolio_title_area').text());
            }, function() {
                $('#title_hover').text('');
            });
        })(jQuery);
    });

Answer 3

这是因为你曾经改变它，并且在你完成悬停时从不要求它改变回来：

＆＃13;

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

＆＃13;

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

＆＃13;

使用mouseover和mouseout代替hover。

Answer 4

添加mouseleave功能

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

Answer 5

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版本......

Answer 6

您正在使用IIFE（即立即调用函数表达式）

((function ($) 
{ 

})(jQuery);

这只执行一次，甚至在执行document.ready之前也是如此。所以它只工作一次。

你甚至可以在没有IIFE的情况下这样做。

显示其他ID中ID的文本

6 个答案: