パラメータを含む関数内にイベントリスナーを追加することをお勧めしますか？

Question

以下の例のような関数でクリックイベントリスナーを使用することをお勧めしますか？あなたの目的は、「クリックのイベントハンドラをアタッチする場合

function someFn(classClickedBtn, popupId) { 

      $(classClickedBtn).click(function(e) { 
       e.preventDefault(); 
       var active = "active"; 
       var mainClass = ".dialogBox"; 

        if ($(popupId).hasClass(active)) { 

         $(popupId).removeClass(active); 

        }else{ 

         for (var i = 0; i< $(mainClass).length; i++) { 
         if ($(mainClass).hasClass("active")) { 
         $(mainClass).removeClass("active"); } } 

         $(popupId).addClass(active); 

        } 

      }); 

     } 


     someFn(".btn1", "#popup"); 

     someFn(".btn2", "#popup"); 

Answer 1

（私はクリックイベントが機能している状況の例を示したかった、コードが何をするかを理解しようとしないでください） 'event of' triggerBtnClass '、何かがあなたの関数を前に呼び出す場合にのみ、そうです。

Answer 2

私はあなたの関数内からリスナーを呼び出すことができます。すべての引数を含む関数を1回呼び出すことで、自分自身を少し簡単にすることができます。以下のリファクタリングされたコードを見てください。私は、オブジェクトのリテラルを使用して関数の引数を格納し、関数を一度呼び出すと、そのオブジェクトを単一のパラメータとして渡しています。

function someFn(fn_data) { 
 
    $(fn_data.btns).on("click", function(e) { 
 
    var active = "active"; 
 
    var mainClass = $(".dialogBox"); 
 
    var popup = $(fn_data.popupId); 
 
    
 
    e.preventDefault(); 
 
    
 
    if (popup.hasClass(active)) { 
 
     popup.removeClass(active); 
 
    } else { 
 
    
 
     for (var i = 0; i < mainClass.length; i++) { 
 
     if (mainClass.hasClass("active")) { 
 
      mainClass.removeClass("active"); 
 
     } 
 
     } 
 

 
     popup.addClass(active); 
 
    } 
 
    }); 
 
} 
 

 
someFn({ 
 
    btns: ".btn1, .btn2", 
 
    popupId: "#popup" 
 
});

#popup { 
 
    margin-top: 1em; 
 
} 
 

 
#popup.active:after { 
 
    content: 'Popup active!'; 
 
} 
 

 
#popup:after { 
 
    content: 'Popup not active!'; 
 
    color: #555; 
 
    display: block; 
 
    height: 20px; 
 
    white-space: nowrap; 
 
    margin-top: 10px; 
 
    border: 1px solid orange; 
 
    padding: 0.5em 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn1">button 1</button> 
 
<button class="btn2">button 2</button> 
 
<div id="popup">popup goes here</div>