如何用jQuery高亮Overlay弹窗内的Div？现有代码无效求修复

我来帮你排查下问题，你的代码里有几个小细节导致高亮没生效，咱们一步步解决：

1. 核心问题：高亮的目标元素选错了 #

你的jQuery代码给.row添加了highlight类，但.row本身没有设置背景样式，实际带背景色的是它内部的.rows元素！所以就算给.row加了类，也看不到任何视觉变化，这是最关键的问题。

2. CSS优先级冲突 #

你定义的.rowsAlt已经设置了background-color: #edece8;，和.highlight的优先级相同。如果.highlight写在.rowsAlt前面，它的样式会被覆盖。可以通过两种方式解决：

• 把.highlight的定义放在.rowsAlt后面，利用CSS的顺序优先级覆盖
• 提高.highlight的选择器优先级，比如结合父类：

.rows.highlight { 
  background: #ebdb34; 
}

3. jQuery代码优化+动态元素兼容 #

如果你的Overlay弹窗是动态生成的（比如通过JS后来插入到DOM中），直接用.click()绑定事件会失效，因为绑定的时候元素还不存在。改成事件委托的方式更可靠，同时简化冗余的代码：

// 事件委托，确保动态生成的元素也能触发事件
$('#projectDataHereToDisplay').on('click', '.row', function() {
  // 切换高亮状态（点击一次加高亮，再点一次取消）
  $(this).find('.rows').toggleClass('highlight');
  // 如果需要点击后强制高亮（不管之前状态），换成：
  // $(this).find('.rows').addClass('highlight');
});

4. HTML规范问题（非直接影响，但建议修复） #

你的HTML里有两个<div id="row2">，ID必须是唯一的，这不符合HTML规范，可能导致其他JS或样式问题，建议改成不同的ID，比如row1、row2。

修复后的完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.cleaner { float: left; padding: 20px 10px 10px 20px; } 
.rows { width: 1000px; min-height: 80px; } 
.rowsAlt { background-color: #edece8; } 
/* 把highlight放在rowsAlt后面，确保优先级 */
.rows.highlight { 
  background: #ebdb34; 
}
.cols { height: 100%; float: left; } 
.col1 { width: 100px; float: left; padding: 20px 10px 10px 20px; } 
.col2 { width: 100px; float: left; padding: 20px 10px 10px 20px; } 
.col3 { width: 200px; float: left; padding: 20px 10px 10px 20px; } 
.col4 { width: 100px; float: left; padding: 20px 10px 10px 20px; } 
.col5 { width: 100px; float: left; padding: 20px 10px 10px 20px; } 
.col6 { width: 100px; float: left; padding: 20px 10px 10px 20px; } 
#row1 { margin-left: 100px; margin-top: 50px; position: relative; width: 83%; margin: 20px 0px 0px 100px; } 
#row2 { margin-left: 100px; margin-top: 50px; position: relative; width: 83%; margin: 20px 0px 0px 100px; } 
</style>
<div id="projectDataHereToDisplay" class="column"> 
  <div class="row"> 
    <div id="row1" class="rows rowsAlt"> 
      <div class="col1">FLG</div> 
      <div class="col2">sun</div> 
      <div class="col3">man,lion</div> 
      <div class="col4"></div> 
      <div class="col5">Byes</div> 
      <div class="cleaner">Add here</div> 
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div> 
    </div> 
  </div> 
  <div class="row"> 
    <div id="row2" class="rows rowsAlt"> 
      <div class="col1">FLG</div> 
      <div class="col2">sun</div> 
      <div class="col3">man,lion</div> 
      <div class="col4"></div> 
      <div class="col5">Byes</div> 
      <div class="cleaner">Add here</div> 
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div> 
    </div> 
  </div> 
</div>
<script>
$('#projectDataHereToDisplay').on('click', '.row', function() {
  $(this).find('.rows').toggleClass('highlight');
});
</script>

这样调整后，点击每个行区域就能正常触发高亮效果了。

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