2017-04-26 32 views
1

私は自分のアプリケーションに剣道のモバイルを使用しています。私はの投稿画像のがnullではない場合、いくつかのクラスを追加する必要があります。 UIの場合、PostedImageUrlがnullの場合はUIを変更する必要がありますが、これをどのようにして実現できますか。複数のCSSスタイルを同じビューに追加する方法

<div data-role=view> 
    <ul class="oneClass" data-role="listview" id="Feeds-listview" data -bind="foreach:data"> 
    <li style="background-color:#FFF;white-space:normal"> 
    <div style="width:100%"> 
    <label class="profile-username front" data-bind="text:username"></label> 
    <div style="float:left"> 
    <span data-bind="text:userId" style="display:none"></span> 
    <div style="padding:0px!important"> 
    <img class="profileimage fimage" data-bind="attr: { src:ImageSrc }" /> 
    </div> 
    </div> 
<div style="float:left"> 
    <img class="emoji" data-bind="attr: { src: emoji }" /> 
    </div> 
    <input type="checkbox" class="listcheckbox "/> 
    <div data-bind="if:delete" class="delete"> 
    <a href="#" id="delete" data-bind="click:$root.Delete"><img 
    src="images/bin.png" style="width:24px;height:24px;float:right;margin- 
    top:10px;" class="front" /></a> 
</div> 
</div> 
    <div > 
    <span data-bind="text:PostedImageID"></span> 
     <img style="height: 200px;width: 300px;margin-top: 10px;" data- 
     bind="attr: { src:PostedImageUrl }" /> 
    </div> 
      <div data-bind="click:$root.Like" class="Like" > 
     </div> 
      <a href="#" data- 
     bind="click:$root.open"class="two"style="float:right;margin-top:47px"> 
    <span class="count" data-bind="text:TotalCount"></span> 
          top:-10px" /> 
    </span> 
    </a> 
    <span class="" data-bind="text:createdAt"></span> 
</li> 
</ul> 
<div> 
+0

jsを使用すると、任意のスタイルを更新することができます –

+0

あなたの時間のおかげで、値の変更に応じてCSSを変更することに関する例がありますか? –

+0

こんにちは@kitty sarvaj、あなたのコードでレンダリングされたHTMLを表示できますPostedImageUrl'?)イメージURLですか? –

答えて

0

使用し、多分これを試してみてください$("img").on("load", function() { .. }

$(document).ready(function() { 

    $("img").on("load", function() { 
    alert('SRC updated!: ' + $(this).attr("src")); 
    }); 

}); 

例:

http://jsfiddle.net/b4ujn03w/3/

$(document).ready(function() { 
 
    $("img").on("load", function() { 
 
    alert('SRC updated!: ' + $(this).attr("src")); 
 
    }); 
 

 
    setTimeout(function() { 
 
    $("img").attr("src", "http://images2.fanpop.com/images/photos/5700000/Random-random-5719763-1280-800.jpg"); 
 
    }, 1000); 
 

 
    setTimeout(function() { 
 
    $("img").attr("src", "https://dummyimage.com/600x400/000/fff"); 
 
    }, 3000); 
 

 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src='http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg' />

関連する問題