如何根据里面的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') 这样的元素。此外，您应该检查 div 是否在您的 if 语句中包含子项，而不是使用选择器。向 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>

这是一个有效的小提琴：https://jsfiddle.net/108ws2c6/