如果背景图像等于特定图像,如何将类添加到div

时间:2017-04-14 15:10:47

标签: javascript jquery

如果背景是某个图像,我试图将一个类添加到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

1 个答案:

答案 0 :(得分:0)

下面的代码应该在div(vc_gitem-animated-block)中添加类,同时隐藏父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/