如何將類添加到div如果背景圖像等於特定圖像

Question

如果背景是特定圖像，我正在嘗試向div（vc_gitem-animated-block）添加一個類。基本上，如果我的div有背景的特定圖像（vc_gitem_image.png），我想隱藏父div。

如果其他div有不同的背景，例如（blog-fpo.png），我需要父div沒有添加類，也不要隱藏它的父類。

我有這樣的代碼在我的網頁：

<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>&nbsp;</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> 

這裏是我的腳本：

<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 

Answer 1

下面的代碼應在同一時間添加類的div（vc_gitem動畫塊）它隱藏父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'); 
    } 
    }); 
}); 

這裏是工作的jsfiddle：https://jsfiddle.net/3jwavz9a/1/