javascript - 如何再次去除颜色

Question

这是一个最喜欢的统计数据，所以我想在再次单击星标时删除颜色以显示:无

//js

function addRating(obj) {
    $('li').each(function(index) {
        $(this).addClass('selected');
        $('#rating').val((index+1));
        if(index == $("li").index(obj)) {
            return false;   
        }
    });
}

function resetRating() {
    if($("#rating").val()) {
        $('li').each(function(index) {
            $(this).addClass('selected');
            if((index+1) == $("#rating").val()) {
                return false;   
            }
        });
    }
}

fiddle http://jsfiddle.net/razanrab/7YjPu/41/

Answer 1

我会使用点击事件，因为它在 jQuery 中更为标准。我还在您的 CSS 中添加了 cursor:hover 以使其看起来更好。此外，我将其更改为 star 类，这样它就可以在不止一颗星的情况下正常工作

$(".star").on("click",function() {
  obj=this;
  $('#rating').val($("li").index(obj));
  $('li').removeClass("selected").each(function(index) {
    $(this).addClass('selected');
    if(index == $("li").index(obj)) {
      return false;	
    }
  });
});

li{display: inline-block;color: #F0F0F0;text-shadow: 0 0 1px #666666;font-size:30px;cursor:pointer}
.highlight, .selected {color:#F4B30A;text-shadow: 0 0 1px #F48F0A;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="detailsPage" data-role="page">
		<div data-role="header">
			<a href="index.html" data-rel="back" class="ui-btn-left ui-btn  ui-btn-icon-notext ui-corner-all ui-icon-back"></a>
			<h1 id="Name"></h1>
		</div>
	<div data-role="content">
  <input type="hidden" name="rating" id="rating" />
			<ul>
				  <li  class="star">★</li>
				  <li  class="star">★</li>
				  <li  class="star">★</li>
         
			</ul>
		</div>		
    	</div>