淘汰赛 js 星级 "value not get cleared"

Question

我正在使用 Knockout js 获得星标 binding.Its 仅在页面为 loaded.when 时第一次工作 select 5 星中的 2 星是我第一次开始它给了我值正确，之后该值未被清除，我无法 select 任何 stars.Need 的帮助。

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);
  }

Answer 1

值按我的预期更新。我注释掉了 localStorage，因为它在代码片段中是被禁止的。

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>

淘汰赛 js 星级 "value not get cleared"

Knockout js star rating "value not get cleared"

css

knockout-2.0

knockout.js