jQuery中Box调整尺寸时Span属性未变更的技术问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是：jQuery的resize()方法默认只对window对象生效，普通DOM元素（比如你的.box）并不会触发这个事件。所以当你hover改变.box宽度时，那段判断.s颜色的代码根本没被执行，自然看不到预期效果。

下面给你两种可行的解决方案，按需选择：

方案1：针对hover场景直接绑定事件 #

既然你的.box宽度变化是由hover触发的，那我们可以直接在hover的回调里检查宽度并更新.s的颜色，这种方式最直接高效：

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box{ 
  width: 60px; 
  height: 60px; 
  background-color: red; 
  transition: width 0.3s; /* 加个过渡动画让尺寸变化更平滑 */
} 
.box:hover{ 
  width: 120px; 
}
</style>
<div class="box"></div>
<br>
<span class="s">我是要变色的文本</span>

<script>
$(document).ready(function(){
  // 缓存选择器，避免重复DOM查询，提升性能
  const $box = $(".box");
  const $s = $(".s");

  // 页面加载完成后先初始化一次颜色
  updateSColor();

  // hover进入和离开时都触发颜色更新
  $box.hover(
    function() {
      updateSColor();
    },
    function() {
      updateSColor();
    }
  );

  // 封装颜色更新逻辑，避免重复代码
  function updateSColor() {
    if ($box.width() < 60) {
      $s.css("color", "red");
    } else {
      $s.css("color", "blue");
    }
  }
});
</script>

方案2：通用尺寸监听（MutationObserver） #

如果以后你的.box尺寸可能通过其他方式改变（比如JS动态修改、其他CSS状态切换），可以用MutationObserver来监听元素的样式变化，这是更通用的解决方案：

完整代码示例 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.box{ 
  width: 60px; 
  height: 60px; 
  background-color: red; 
  transition: width 0.3s;
} 
.box:hover{ 
  width: 120px; 
}
</style>
<div class="box"></div>
<br>
<span class="s">我是要变色的文本</span>

<script>
$(document).ready(function(){
  const $box = $(".box");
  const $s = $(".s");

  // 初始化颜色
  updateSColor();

  // 创建MutationObserver实例，监听样式变化
  const observer = new MutationObserver(function(mutations) {
    updateSColor();
  });

  // 监听.box的style属性变化
  observer.observe($box[0], {
    attributes: true,
    attributeFilter: ['style']
  });

  function updateSColor() {
    if ($box.width() < 60) {
      $s.css("color", "red");
    } else {
      $s.css("color", "blue");
    }
  }
});
</script>

额外小提示 #

• 缓存jQuery选择器（比如const $box = $(".box")）可以减少重复DOM查询，提升代码性能；
• 页面初始化时调用一次颜色更新函数，能确保初始状态符合预期。

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