求助：将一个ID文本显示到另一个ID中仅生效一次的问题

嘿，我来帮你搞定这个hover只生效一次的问题！

问题根源 #

你现在的代码有两个核心问题：

1. 重复使用唯一ID：HTML里你给多个标题都加了id="portfolio_title_area"，但ID在整个页面里必须是唯一的，jQuery的$('#portfolio_title_area')只会选中第一个匹配的元素，后面的标题hover时根本触发不了事件。
2. 事件绑定只针对初始元素：如果你的标题是动态生成的（比如PHP循环输出的文章列表），直接绑定hover只会对页面加载时就存在的元素生效，后续新增的标题也不会触发更新。

修复步骤 #

1. 先改HTML：把ID换成类

把重复的ID改成类，类可以在多个元素上复用：

<div class="cp_widget_content" id="portfolio_content_area"> 
  <b class="cp_widget_title portfolio_title_area"><?php echo get_the_title(); ?></b>
  <div id="title_hover">Test</div>
</div>

（假设这段代码是在PHP循环里输出的，每个条目都有自己的标题）

2. 修正jQuery事件绑定

用类选择器绑定hover事件，并且每次hover时获取当前标题的文本更新目标区域：

jQuery(document).ready(function($) {
  // 针对页面加载时就存在的静态标题
  $('.portfolio_title_area').hover(
    // 鼠标移上去时更新内容
    function() {
      // 用$(this)获取当前hover的标题，确保每次取的是对应元素的文本
      var currentTitleText = $(this).text();
      $('#title_hover').text(currentTitleText);
    },
    // 可选：鼠标移开时重置回默认文本
    function() {
      $('#title_hover').text('Test');
    }
  );

  // 如果你的标题是动态加载的（比如AJAX加载新内容），用事件委托替代上面的代码
  // $(document).on('mouseenter', '.portfolio_title_area', function() {
  //   var currentTitleText = $(this).text();
  //   $('#title_hover').text(currentTitleText);
  // });
  // $(document).on('mouseleave', '.portfolio_title_area', function() {
  //   $('#title_hover').text('Test');
  // });
});

重点提醒 #

• 一定要用$(this)来获取当前hover的标题元素，这样每次hover不同的标题时，都会拿到对应元素的文本，而不是固定第一个的内容。
• 如果标题是动态添加的（比如滚动加载更多），必须用事件委托的写法（注释里的那段），把事件绑定到document或者更接近的父级元素上，这样新添加的元素也能触发hover事件。

内容的提问来源于stack exchange，提问作者Eric Graventein