クリックした要素とその子にのみクラスを追加する

Question

別のクラスをクリックしたときにクラスをdivに追加しようとしています。 1つをクリックするとコードが表示されますdivすべてがクラスを追加しました。

FIDDLE

私のjQueryのは、次のとおりです。

$(".front").click(function (event) { 
    // remove classes from all 
    $('.front .back').not($(this)).removeClass('back-Active'); 
    // add class to the one we clicked 
    $('.front .back').addClass("back-Active"); 
    event.stopPropagation(); 
}); 

どのように私はこの問題を解決するだろうか？あなたも.front要素にクラスを追加したい場合は、現在の要素

$(".front").click(function (event) { 
     // remove classes from all 
     $('.front .back').removeClass('back-Active'); //line changed to remove back-Active from all 
     // add class to the one we clicked 
     $(this).find('.back').addClass("back-Active"); //this line changed to add back-Active to only current element 
     event.stopPropagation(); 
    }); 

へthis参照を使用することにより

Answer 1

使用$(this)を試してみてくださいクリックされた要素。

$('.back', this)    // Select the element inside clicked element having `back` class 
    .addBack(this)   // Add clicked element to the set 
    .addClass("back-Active"); // Add class on the elements 

Updated Fiddle

$(document).on('click', function() { 
 
    $('.back').removeClass("back-Active"); 
 
}); 
 

 

 
$(".front").click(function(event) { 
 
    // remove classes from all 
 
    $('.back-Active').removeClass('back-Active'); 
 
    // add class to the one we clicked 
 
    $('.back', this).addBack(this).addClass("back-Active"); 
 
    event.stopPropagation(); 
 
});

.back-Active { 
 
    transform: scale(1.0) !important; 
 
    opacity: 1 !important; 
 
    transition: 400ms ease; 
 
} 
 

 
.front { 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
} 
 

 
.back { 
 
    transform: scale(0.0); 
 
    opacity: 0; 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-top: -18px; 
 
    transition: 400ms ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="front"> 
 
    AAA 
 
    <div class="back">AAA-BACK</div> 
 
</div> 
 

 
<div class="front"> 
 
    BBB 
 
    <div class="back">BBB-BACK</div> 
 
</div> 
 

 
<div class="front"> 
 
    CCC 
 
    <div class="back">CCC-BACK</div> 
 
</div> 
 

 
<div class="front"> 
 
    DDD 
 
    <div class="back">DDD-BACK</div> 
 
</div>

Answer 2

、その後を参照するために、イベントハンドラで

$(".front").click(function (event) { 
     $('.front, .front .back').removeClass('back-Active'); 
     $(this).addClass("back-Active"); 
     $(this).find('.back').addClass("back-Active"); 
     event.stopPropagation(); 
    });