Question

我意识到有很多类似的问题，但是我正在实施答案，但仍然无法解决。我有一些将鼠标悬停在列表项上时会更改图像的jQuery。效果很好，但具有淡入淡出效果，即使已经存在正确的图像，它似乎也会淡入淡出。我发现如果添加一个if语句而忽略了else，则它只会在图像路径不相等时执行该功能，而在图像路径相等时不执行任何操作。
我有一个jsfiddle。没有语法错误。看起来应该可以，但不能。

jquery：

$(document).ready(function() {
  var path = 'https://avayoupaint.com/images/';
  $('.menu-child').mouseenter(function() {
    var newimage = $(this).attr('data-path') + '.jpg';    
    if(newimage != (path + $('.swap > img').attr('src'))) {
        $('.swap > img').fadeOut(100,function() {
        $(this).attr('src', path + newimage).fadeIn(100)
      });
    } 
  })
});

html：

<section class="submenuWrapper">
    <ul class="twinsub">
        <li class="twinmultisub twinleft">
             <ul>
                  <li class="menu-child" data-path="menu-interior"><a href="#"><span>Interior Painting</span></a></li>
                  <li class="menu-child" data-path="menu-exterior"><a href="#"><span>Exterior Painting</span></a></li>
             </ul>
        </li>
        <li class="twinmultisub twinimg">
             <section class="swap">
                 <img src="https://avayoupaint.com/images/menu-exterior.jpg" />
             </section>
        </li>   
    </ul>
</section>

Answer 1

您似乎在将路径添加到比较的错误一侧。您要比较：

path + newimage !== $('.swap > img').attr('src')`

$(document).ready(function() {
  var path = 'https://avayoupaint.com/images/';
  $('.menu-child').mouseenter(function() {
    var newimage = $(this).attr('data-path') + '.jpg';

    if(path + newimage !== $('.swap > img').attr('src')) {
        $('.swap > img').fadeOut(100,function() {
        $(this).attr('src', path + newimage).fadeIn(100)
      });
    } 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="submenuWrapper">
    <ul class="twinsub">
        <li class="twinmultisub twinleft">
             <ul>
                  <li class="menu-child" data-path="menu-interior"><a href="#"><span>Interior Painting</span></a></li>
                  <li class="menu-child" data-path="menu-exterior"><a href="#"><span>Exterior Painting</span></a></li>
             </ul>
        </li>
        <li class="twinmultisub twinimg">
             <section class="swap">
                 <img src="https://avayoupaint.com/images/menu-exterior.jpg" />
             </section>
        </li>   
    </ul>
</section>

jQuery如果不执行其他操作，则不执行任何操作-不起作用

1 个答案: