再利用可能な要素を$（this）でトリガーすると、クリックされた要素がトリガーされます

Question

$（this）を使用するJSロジックを作成しようとしていますので、コードを複数の要素で再利用できます。それぞれが個別にトリガーされるように同じページを表示します。

これは私のJSコードです：

$(".fab").on("click", function(){ 
    $(this).toggleClass("clicked"); 
    $(".screen2").addClass("active"); 
    $(".box2 ,.box1 ,.box3").addClass("active"); 
}); 

$("#close").on("click", function(){ 
    $(".screen2").removeClass("active"); 
    $(".fab").removeClass("clicked"); 
    $(".box1 ,.box2 ,.box3").removeClass("active"); 
}); 

マイHTML：

<div class="app"> 
    <div class="header"></div> 
    <div class="content"> 
    <h1>Click the fab</h1> 
    </div> 
    <div class="fab"></div> 
    <div class="screen2"> 
    <h1>new window</h1> 
    <div id="close"></div> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    </div> 
</div> 

は、どのように私は$（この）適切に使用できますか？私がしようとしているのは、JSコードを同じページの複数の要素に再利用できるようにして、.fabボタンをクリックした要素だけをトリガーするようにすることです。

Answer 1

また、 $(this), .prev(), .next(), .find(), .closest()などは、あなたが作業しているものに近い要素を参照するためにDOMをトラバースする必要があります。そうでなければ、ドキュメントのすべてのクラスを対象とします。

$(".fab").on("click", function(){ 
    $(this).toggleClass("clicked"); 
    $(this).next(".screen2").addClass("active"); 
    $(this).next(".screen2").find(".box2 ,.box1 ,.box3").addClass("active"); 
}); 

$("#close").on("click", function(){ 
    $(this).closest(".screen2").removeClass("active"); 
    $(this).closest(".screen2").prev(".fab").removeClass("clicked"); 
    $(this).closest(".screen2").find(".box1 ,.box2 ,.box3").removeClass("active"); 
}); 

Answer 2

あなたは、アレイ内のjQueryのセレクタを格納することを反復し、アレイ内の各jQueryのセレクタのために、その内側の要素を反復処理するためにjQueryの.each()を使用することができます。

次の例では、DOMにclass1という複数のインスタンスが存在する場合があります。

var arrElements = [$('#id1'), $('#id2'), $('.class1')]; 
for (var i = 0; i < arrElements.length; i++) { 
    arrElements[i].each(function() { 
    $(this).on('click', function() { 
     // do stuff (use $(this) to refer to the current object) 
    }); 
    }) 
}