jquery - 在悬停时启用更改图像，然后根据处于事件状态的类禁用 jquery

Question

我有一个 ajax 网站，在主页上，我在悬停时更改了一些图像，我在 dom ready 上调用了一个函数，我为此使用的代码如下

function darkText() {
    $('#home,#home2,#home3,#home4').bind('mouseenter mouseleave', function() {
        $(this).attr({
            src: $(this).attr('data-other-src') 
            , 'data-other-src': $(this).attr('src') 
        })
    });
}

$(document).ready(function() {
    darkText();
});

有了这个 ajax 站点，有 4 个框显示这些图像，并且如前所述，一旦将鼠标悬停在图像上，它们就会发生变化。每个图像都链接到一个 ajax 页面，一旦打开，他们点击的相关图像就会再次显示。我想在打开 ajax 页面时禁用悬停功能。

在我的代码中，每个图像都有一个带有 box 类的 div，单击图像后，一个附加的 active 类将附加到 框类。当 active 在类中可见时，我是否可以使用这个 active 类来禁用该功能，然后在 active 不在类中时重新启用。

事件追加的代码如下:

<div id="about" class="box"> <--------- THIS IS THE CLASS WHERE 'ACTIVE' APPENDS
      <div class="header">
        <div class="special-title">
          <nav>
            <h2 class='top'><a href="#" onclick="checkForWorkChange()"><img id="bg-home" data-other-src="dark.png" src="light.png" alt=""></a></h2>
          </nav>
        </div>
        <div class="desc invisible">
          <h2>

          </h2>
        </div>
      </div>
content here....
</div>

抱歉，这里解释起来有点困惑。

Answer 1

解决方案 1: 您或许可以将属性 setter 包装在 if 语句中。

if (!$(this).parents(".box").hasClass("active")) {
  // set attributes here
}

演示:https://jsfiddle.net/j745btwp/1/

解决方案 2: 悬停效果可能只能通过 css 来完成。只需要点击事件 这将在 javascript 中将“active”添加到您的 .box 元素。

<div id="about" class="box">
  <a class="picture" href="#">
    <img class="default" src="https://images.waiv.host/home/work.png" alt=""/>
    <img class="onHover" src="https://images.waiv.host/home/work-dark.png" alt=""/>
  </a>
</div>
<style>
.picture {
  display: inline-block;
  position: relative;
  height: 120px; /* pic height */
  width: 240px; /* pic width */
}

.picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.picture .onHover, .picture:hover .default {
  display: none;
}

.picture:hover .onHover {
  display: block;
}

.active .picture .onHover {
  display: none !important;
}
.active .picture:hover .default {
  display: block;
}
</style>

演示:https://jsfiddle.net/j745btwp/3/