I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario:
https://jsfiddle.net/0g1Lvk2j/20/
If you scroll to the end and close the last box by clicking on the orange box, the orange borders of the closed box should transfer to another visible box by removing the class photo-src-as-main from the closed box and adding it to the first visible box. However, this functionality is not working as expected!
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div>HTML:
<div class="photo fn-photo-upload grid-25 tablet-grid-50 mobile-grid-100" >
<div class="photo-frame">
<div class="photo-src fn-photo-upload-src">
<div class="pu-btn-container"><span class="text-charcoal">/upload</span></div>
</div>
</div>
</div>CSS
.display-none{
display:none;
}
.photo-src-control{
width: 40px;
height: 40px;
background-color: orange;
cursor: pointer;
}
/* Additional CSS properties here */
Javascript/jQuery
$(document).ready(function(){
$(".photo-src-remove").click(function(){
var photo=$(this).parents().eq(3);
var photoFrame=$(this).parents().eq(2);
photo.addClass("display-none");
if (photoFrame.hasClass("photo-src-as-main")) {
// Add and remove classname logic
$(".photo").not(".fn-photo-upload,.display-none").find(".photo-frame").eq(0).addClass("photo-src-as-main")
photoFrame.removeClass("photo-src-as-main");
}
})
$(".photo-src").not(".fn-photo-upload-src").click(function(){
$(".photo-frame").removeClass("photo-src-as-main")
$(this).parent().addClass("photo-src-as-main")
})
})