javascript - 点击最喜欢的明星

标签 javascript jquery html css

<分区>


关闭 6 年前

我想让星星在我点击它时变色,但是因为我在单独的文件夹中同时拥有 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;}

最佳答案

只需将 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>

关于javascript - 点击最喜欢的明星,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43752265/

上一篇:javascript - 如何在提供电话号码时在特定数字之间添加空格

下一篇:jquery - 如何一次只打开一个弹出窗口而不是同时打开两个弹出窗口?

相关文章:

html - 当它们的高度不同时,为什么第一个跨度会进入第二个跨度的底部?

html - CSS 在 div 中居中图像

javascript - 使用 setInterval 更新 Canvas 填充文本

javascript - 如何保留dos文本文件编码

javascript - 使用 JQuery 迭代深层 XML 结构 - IE9

javascript - 检查当前主机是否可以访问 URL

javascript - 循环 HTML 变量并用内容替换 span

javascript - 滚动条内的滚动条仅使内部滚动条跳转到 id

javascript - 如何拆分对象数组以创建新对象

如果为 null,Jquery 行分割不起作用