当用户选择单选按钮时，我正在使用 knockout.js 显示价格和 ID，这是脚本：
<div data-bind="with: bin2ViewModel">
<div class="divRadiobtns" data-bind="foreach: availableGroups">
<input type="radio" class="radioOptions" name="retailerGroup" data-bind="checked: $parent.selectedGroupOption, value: price" />
</div>
<div data-bind="with: selectedRetailerGroup">
<span class="actualPrice" data-bind="text: price" />
</div>
<div data-bind="with: selectedRetailerGroup">
<input type="hidden" class="hiddenValue" data-bind="value: retailerproductId" />
</div>
</div>
淘汰赛.js：
<script type="text/javascript">
//<![CDATA[
var Bin2ViewModel = function () {
var self = this;
this.selectedRetailerGroup = ko.observable();
this.selectedGroupOption = ko.observable();
this.selectedGroupOption.subscribe(function (newVal) {
var items = $.grep(self.availableGroups(), function (item) { return item.price() == newVal; });
self.selectedRetailerGroup(items[0]);
});
this.selectedGroup = ko.observable();
this.availableGroups = ko.observableArray(
[ new RetailerViewModel("302852", "£2.55"),
new RetailerViewModel("21290", "£1.80")
]);
}
var RetailerViewModel = function (retailerproductId, price) {
this.retailerproductId = ko.observable(retailerproductId);
this.price = ko.observable(price);
}
ko.applyBindings({ bin2ViewModel: ko.observable(new Bin2ViewModel()) });
//]]>
</script>
我想用图像设置单选按钮的样式，所以我尝试过：
CSS：
.radioOptions
{
background: url("http://static.e-talemedia.net/content/images/odditiesyellowselector.png") no-repeat scroll 0 0 transparent;
margin-bottom: 25px;
margin-top: 17px;
}
.radioOptions-checked
{
background: url("http://static.e-talemedia.net/content/images/odditiesyellowblackselector.png") no-repeat scroll 0 0 transparent;
}
但我无法理解它 - 有没有人知道我如何在 knockout.js 中设置样式？
我以前使用 jquery 如下：
<%--<script type="text/javascript">
//<![CDATA[
$(function () {
$('input:radio').hide().each(function () {
var label = $("label[for=" + '"' + this.id + '"' + "]").text();
$('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);
});
$('.radio-fx').click(function () {
$check = $(this).prev('input:radio');
var unique = '.' + this.className.split(' ')[1] + ' span';
$(unique).attr('class', 'radio');
$(this).find('span').attr('class', 'radio-checked');
$check.attr('checked', true);
var rpPrice = $('input[name=selectRetailer]:radio:checked');
// Here I have an ID
$(".actualPrice").html(rpPrice.val());
// var rpId = $('input[name=selectRetailer]:radio:checked');
// $(".actualPrice").html(rpId.val());
}).on('keydown', function (e) {
if (e.which == 32) {
$(this).trigger('click');
}
});
});
//]]>
</script>--%>
但这抛出了 knockout.js
任何提示表示赞赏！