点击收藏的明星

时间:2017-05-03 06:07:41

标签: javascript jquery html css

我想点击它时让星星变色,但因为我在单独的文件夹中同时存在Javascript和HTML文件,如何将javascript中的函数恢复为html文件?

Fiddle

HTML

<input type="hidden" name="rating" id="rating" />   
<ul>
<li  id="fav">★</li>
</ul>

的Javascript

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

$("#fav").click(function(){
    addRating(obj);
});

的CSS

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

1 个答案:

答案 0 :(得分:2)

只需将this传递给addRating即可保存所有者对象的上下文。

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

$("#fav").on('click',function() {
  addRating(this);
});
li {
  float: left;
  margin-left: 9px;
  display: inline-block;
  color: #F0F0F0;
  text-shadow: 0 0 1px #666666;
  font-size: 30px;
}

.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>
<input type="hidden" name="rating" id="rating" />

<ul>
  <li id="fav">★</li>

</ul>