内部の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/

Answer 2

そして、はい、私は固定しかし、今は別の問題があります。これは一度しか動作しません。多くのユーザーがいて、それぞれのプロフィールが異なるAjaxページにあります。このスクリプトは一度しか動作しません。別のユーザープロファイルに行くと、動作しません。間には更新はありません。どのようにそれがすべてのユーザーに動作するようにするには？

私は意味：

まず、ユーザ - http://linkt/#/app/user/o9OI9x3zGH 第二のユーザ - http://ssd.lt/#/app/user/yHCUnPi9fd

jQueryの初回のみ動作しますか、リフレッシュした後に（F5）