你可以在.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");