Fügen Sie Klasse nur zu angeklickt Element hinzu und es ist Kinder

Question

Ich versuche, eine Klasse zu einem div hinzuzufügen, wenn ein anderes angeklickt wird. Mit dem Code, den ich habe, wenn ich auf einen div klicken, bekommen alle die Klasse hinzugefügt.

FIDDLE

Meine jQuery ist:

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

Wie ich dieses Problem lösen könnte?

Answer 1

Verwenden $(this) im Ereignishandler die verweisen Element, das angeklickt wird.

$('.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

Durch die Verwendung des this Bezug auf aktuelle Element

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

Wenn Sie die Klasse zu .front Element auch hinzufügen möchten, dann versuchen

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