我想以某种方式根据我从js获得的名称值动态设置图像源。
我试过类似这样的东西,用于设置特定div的css类,使其与图像一起工作但不起作用。我想要实现的是src根据名称值动态改变
<img data-bind="attr:{src: 'image1.jpg' : Name == 'Package 1', src: 'image2.jpg' : Name == 'Package 2'}" />
作为参考,这是用于css样式的:
<div data-bind="css: { package1_css: Name == 'Package 1', package2_css: Name == 'Package 2'" />
由于
答案 0 :(得分:1)
为此使用计算的observable。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
此外,使用self.ImageSource = ko.computed(function(){
var url1 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=101&50&w=50&h=50";
var url2 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=102&50&w=50&h=50";
switch(self.Name()){
case "Package 1":
return url1;
case "Package 2":
return url2;
break;
}
}, self);
绑定绑定到图像标记:
attr