I'm trying to add a class to a div (vc_gitem-animated-block) if the background is a certain image. Basically, if my div has a certain image (vc_gitem_image.png) for the background, I want to hide the parent div.
If other divs have a different background for example (blog-fpo.png), I need the parent div to not have the class added, as well as don't hide it's parent.
I have this code in my page:
<style>
.hide{
display:none;
}
.show{
display:block;
}
</style>
<div class="vc_gitem-animated-block">
<div class="vc_gitem-zone vc_gitem-zone-a vc_gitem-is-link" style="background-image: url('http://savagebrands17.wpengine.com/wp-content/uploads/2016/12/blog-fpo.jpg') !important;">
<a href="http://savagebrands17.wpengine.com/join-savage-at-conscious-capitalism-2017-%c2%89uo-pitfalls-on-the-path-to-purpose-presentation/" title="Join Savage at Conscious Capitalism 2017 – “Pitfalls on the Path to Purpose” Presentation" class="vc_gitem-link vc-zone-link"></a>
<img src="https://savagebrands17.wpengine.com/wp-content/uploads/2016/12/blog-fpo.jpg" class="vc_gitem-zone-img" alt="">
<div class="vc_gitem-zone-mini">
</div>
</div>
</div>
<p> </p>
<div class="vc_gitem-animated-block">
<div class="vc_gitem-zone vc_gitem-zone-a vc_gitem-is-link" style="background-image: url('https://savagebrands17.wpengine.com/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png') !important;">
<a href="http://savagebrands17.wpengine.com/celebrating-client-work-savage-brands-honored-with-iabc-bronze-quill-awards-2/" title="Celebrating Client Work! Savage Brands Honored with IABC Bronze Quill Awards" class="vc_gitem-link vc-zone-link"></a>
<img src="https://savagebrands17.wpengine.com/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png" class="vc_gitem-zone-img" alt="">
<div class="vc_gitem-zone-mini">
</div>
</div>
</div>
Here is my script:
<script>
jQuery(function(){ /* to make sure the script runs after page load */
if (jQuery('.vc_gitem-zone.vc_gitem-zone-a.vc_gitem-is-link').css('background-image') === 'url(https://savagebrands17.wpengine.com/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png) !important;') {
jQuery(this).find('.vc_gitem-animated-block').addClass('hide');
}
});//END $function
The following code should add class to div (vc_gitem-animated-block) at the same time it hide the parent div.
$(function() {
var list = $('.vc_gitem-animated-block > div');
$(list).each( function () {
var bg = $(this).css('background-image');
var ck ='url("https://savagebrands17.wpengine.com/wp-content/plugins/js_composer/assets/vc/vc_gitem_image.png")';
if(bg === ck) {
$(this).parent().closest('div').addClass('hide');
} else {
$(this).parent().closest('div').addClass('show');
}
});
});
Here is the working jsfiddle: https://jsfiddle.net/3jwavz9a/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.