.on（）関数の中にif/else文を置くことはできますか？

Question

最後に、DOM内のホバー要素の上にある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

あなたは文を宣言することはできません、次のように使用してみてくださいオブジェクト式の内部で宣言することはできますが、ブロック内、本体内、またはシーケンス式内のステートメントを宣言できます。

コードを編集するときは、$.fn.onの最初のパラメータで宣言された各関数のブロック内で、&&演算子を使用して1つのアクションを実行していません。

(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");