我有一个 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。
我怎样才能让它发挥作用?
最佳答案
您的 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/
关于jquery - 如何根据里面的div改变div的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47433156/