我正在使用Knockout js进行星形绑定。它仅在页面加载时第一次工作.当我第一次选择 2 星中的 5 星时,它正确地给了我值,之后值没有被清除,我无法选择任何星星.需要一些帮助。
ko.bindingHandlers.starRating = {
init: function (element, valueAccessor) {
console.log(valueAccessor);
$(element).addClass("starRating");
for (var i = 0; i < 5; i++)
$("<span>").appendTo(element);
$("span", element).each(function (index) {
$(this).hover(
function () { $(this).prevAll().add(this).addClass("hoverChosen") },
function () { $(this).prevAll().add(this).removeClass("hoverChosen") }
).click(function () {
var observable = valueAccessor();
console.log(observable)
observable(index + 1);
window.localStorage.setItem("star", observable());
});
});
},
update: function (element, valueAccessor) {
var observable = valueAccessor();
$("span", element).each(function (index) {
$(this).toggleClass("chosen", index < observable());
});
}
};
//HTML
<div id="divstarRating">
<span id="feedStar" data-bind="starRating: UserFeedpoints"> </span>
</div>
//css
.starRating span {
width: 24px;
height: 24px;
background-image: url(../star.png);
display: inline-block;
cursor: pointer;
background-position: -24px 0;
}
.starRating span.chosen {
background-position: 0 0;
}
.starRating:hover span {
background-position: -24px 0;
transform: rotate(-15deg) scale(1.3);
}
.starRating:hover span.hoverChosen {
background-position: 0 0;
transform: rotate(-15deg) scale(1.3);
}
该值按预期更新。我注释掉了本地存储,因为这在片段中是被禁止的。
ko.bindingHandlers.starRating = {
init: function(element, valueAccessor) {
console.log(valueAccessor);
$(element).addClass("starRating");
for (var i = 0; i < 5; i++)
$("<span>").appendTo(element);
$("span", element).each(function(index) {
$(this).hover(
function() {
$(this).prevAll().add(this).addClass("hoverChosen")
},
function() {
$(this).prevAll().add(this).removeClass("hoverChosen")
}
).click(function() {
var observable = valueAccessor();
console.log(observable)
observable(index + 1);
//window.localStorage.setItem("star", observable());
});
});
},
update: function(element, valueAccessor) {
var observable = valueAccessor();
$("span", element).each(function(index) {
$(this).toggleClass("chosen", index < observable());
});
}
};
ko.applyBindings({
UserFeedpoints: ko.observable()
});
.starRating span {
width: 24px;
height: 24px;
background-color: red;
background-image: url(https://upload.wikimedia.org/wikipedia/en/e/e5/Yellow_Star.png);
display: inline-block;
cursor: pointer;
background-position: -24px 0;
}
.starRating span.chosen {
background-position: 0 0;
}
.starRating:hover span {
background-position: -24px 0;
transform: rotate(-15deg) scale(1.3);
}
.starRating:hover span.hoverChosen {
background-position: 0 0;
transform: rotate(-15deg) scale(1.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="divstarRating">
<span id="feedStar" data-bind="starRating: UserFeedpoints"> </span>
<div data-bind="text: UserFeedpoints"></div>
</div>