I'm using this code to control a transform on elements. On click, I want to anything with the has-transform class to be set with a high z-index, say 99. Another click should set the z-index back to it's original value.
I tried adding this to the click function, but it had no effect: $('.has-transform').css('z-index', 99);
/// the code ///
<style>
.has-transform, .transform_target .et-pb-icon {
transition: all 400ms ease-in-out;
}
.toggle-transform-animation {
transform: none !important;
}
#transform_target {
cursor: pointer;
}
.toggle-active-target.et_pb_blurb .et-pb-icon {
background-color: transparent;
}
</style>
<script>
(function($) {
$(document).ready(function(){
$('#transform_target').click(function(){
$('.has-transform').toggleClass('toggle-transform-animation');
});
});
})( jQuery );
</script>
If you have more than 1 element with the class '.has-transform', the $('.has-transform') will return an iterable collection.
Each of the items in this collection needs to be handled separetly, each should have its own toggleClass method called:
$('.has-transform').each(function(){
$(this).toggleClass('toggle-transform-animation');
// where this is an item of the collection
});