jquery - 如何根据里面的div改变div的样式？

Question

我有一个 div，人们可以在其中导入照片(例如封面)。虽然他们没有上传任何照片，但它有一个封面图像，但当他们上传照片时，背景会变成白色。 (这就是我想要的工作方式，但它不起作用)

这个例子正在运行:

   $(document).ready(function () {
                if ('#bgbg:not(:empty)') {
                    $('#bgbg').css({ 'background-color':'#fff',
                        'background-image':'none !important' });

                }
            });

.profile-photo-bg {
    background-image:url("../images/cover-placeholder.jpg");
    background-size:cover;

    height:245px;
   overflow:hidden;
}

<div  class="profile-photo-bg no-padding col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div id="bgbg" class="profile-photo-bg2">

                    <div ng-repeat="image in theUser.attributes.ImageGallery " class=" galleryImage2 " style="background:url({{image._url}}) 50% 50% / cover; ">
                        <i class='ion-close' ng-click='deleteFromGallery(image)'></i></div>

                    </div>

                </div>

现在我有不同的代码，其中 a 不能使用相同的 jquery 脚本:

<div  id="bgbg3" class="profile-photo-bg no-padding col-lg-12 col-md-12 col-xs-12 col-sm-12">
                   <a style="" class="fotki" ng-repeat="image in theUser.attributes.ImageGallery" href="{{image._url}}" data-lightbox="gallery">
                       <div ng-if='$index < 5' class="galleryImage2 " style="background-image:url({{image._url}}); background-size: cover; "></div>
                   </a>
               </div>

我使用 angularjs、jquery、ionic。

我怎样才能让它发挥作用？

Answer 1

您的 JavaScript 语法有错误。您应该在 if 语句中选择类似 $('#bgbg') 的元素。另外，您应该检查 if 语句中的 div 是否有子级，而不是使用选择器。向 div 添加类也比使用 jQuery 应用纯 css 更好。

JavaScript:

$(document).ready(function () {
    $('.bgbg').each(function() {
        if ($(this).children().length == 0) {
            $(this).addClass('no-children');
        }
    })
});

CSS:

.bgbg {
    background-image:url("http://www.gigcity.ca/wp-content/uploads/2017/06/Tool-feature.jpg");
    background-size:cover;
    height:245px;
    overflow:hidden;
}
.bgbg.no-children {
    background-image: none !important;
    background-color: white;
}

HTML:

<div  class="profile-photo-bg no-padding col-lg-12 col-md-12 col-xs-12 col-sm-12">
  <div class="profile-photo-bg2 bgbg">
    <div ng-repeat="image in theUser.attributes.ImageGallery " class=" galleryImage2 " style="background:url({{image._url}}) 50% 50% / cover; ">
      <i class='ion-close' ng-click='deleteFromGallery(image)'></i>
    </div>
  </div>
</div>

<div class="profile-photo-bg no-padding col-lg-12 col-md-12 col-xs-12 col-sm-12">
  <div class="profile-photo-bg2 bgbg">
  </div>
</div>

这是一个工作 fiddle :https://jsfiddle.net/108ws2c6/