你可以在.on（）函数中放入一个if/else语句吗？

Question

最后发现一些代码会改变DOM中hover元素之上svg的悬停颜色，但现在我想向它添加一些逻辑。

HTML

<div class="tag--active grid__item small--one-third medium--one-third large--one-third xlarge--one-third">        
    <div class="tag-container"> 
     <a class="svg-filter-link" href=""> 
      <div class="top clearfix"> 
      <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> 
       <svg width="41px" height="48px" viewBox="0 0 41 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
        <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> 
        <title>filter-icn-bedbug</title> 
        <desc>Created with Sketch.</desc> 
        <defs></defs> 
        <g id="Pest-Peeve-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
         <g id="Shopfront" transform="translate(-402.000000, -706.000000)" fill="#C8C8C8"> 
          <g id="filter-icn-pest" transform="translate(154.000000, 698.000000)"> 
           <path d="M284.00492,...bunch of numbers... L277.822737,10.9244995 Z" id="filter-icn-bedbug"></path> 
          </g> 
         </g> 
        </g> 
       </svg> 
      </div> 
     </a> 
     <div class="bottom"> 
      <a title="Title" href="/collections/tag">Link Text</a> 
     </div> 
    </div> 
</div> 

的JavaScript

$(document).on({ 
     mouseenter: function() { 
      $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
     }, 
     mouseleave: function() { 
      $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
     } 
}, ".tag-container a"); 

在这一点上，SVG会改变颜色像它应该徘徊的时候，再变回不徘徊的时候。然而，问题在于，当页面加载时，“标记 - 活动”图标（活动链接）已被高亮显示，因此在将鼠标悬停在其上方后，它将删除突出显示。

我想补充的逻辑说，“如果它已经是这个颜色，什么也不做”，但下面的不会起作用：

$(document).on({ 
    if ($(this).closest(".grid__item").hasClass("tag--active") == 'false') { 
     mouseenter: function() { 
      $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
     }, 
     mouseleave: function() { 
      $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
     } 
    } 
}, ".tag-container a"); 

我想我必须使用错误的语法。你会怎么做？

Answer 1

使用not()过滤器，而不是if()。

$(document).on('mouseenter mouseleave', ".tag-container a", function(event) { 
    var fillColor = event.type === 'mouseenter' ? '#0BACFF' : '#939393'; 
    $(this).closest(".grid__item").not('.tag--aactive').find('svg path').css({ 'fill': fillColor }); 
}); 

Answer 2

你不能做到这一点，你正在尝试的方式，但你可以这样说：

$(document).on({ 
     mouseenter: function() { 
      if ($(this).closest(".grid__item").hasClass("tag--active") == 'false') { 
       $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
      } 
     }, 
     mouseleave: function() { 
      if ($(this).closest(".grid__item").hasClass("tag--active") == 'false') { 
       $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
      } 
     } 
    } 
}, ".tag-container a"); 

Answer 3

尝试使用这样的，

$(document).on(".tag-container a", 'mouseenter' function(){ 
    if ($(this).closest(".grid__item").hasClass("tag--active")) { 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 

    } 
}); 

$(document).on(".tag-container a", 'mouseleave' function(){ 
    $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
}); 

Answer 4

你不能声明语句在一个对象表达式中，但是你可以在一个块内部，在一个体内部或者在一个序列表达式中声明语句。

当编辑你的代码，我没有用'if'声明，但&&操作员运行在$.fn.on的第一个参数声明的每个功能块内的一个动作。

(document).on({ 

    mouseenter: function() { 
     // condition 
     !$(this).closest(".grid__item").hasClass("tag--active") && 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
    }, 

    mouseleave: function() { 
     // condition 
     !$(this).closest(".grid__item").hasClass("tag--active") && 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
    } 

}, ".tag-container a");