2017-04-26 26 views
1

我使用Kendo手機爲我的應用程序,我有su我需要添加多個類到我的視圖,當PostedImageUrl不是null,我需要添加一些基於類在用戶界面上,當PostedImageUrl爲空我需要更改用戶界面,我如何實現這種友好的建議。如何添加多個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

hi @kitty sarvaj,你能告訴我你的代碼呈現的HTML(html有' PostedImageUrl'?)他們是圖片網址? –

回答

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' />

相關問題