Question

我有一个非常简单的星级评分系统。我遇到的问题是onclick事件假设在点击时更改星的颜色。

到目前为止，我已经创建了jsFiddle。

HTML

<div class="rating">
<span id="five-stars" onclick="vote(5); return false; 
document.getElementById('five-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">
&#9734;</span><span id="fout-stars" onclick="vote(4); return false; 
document.getElementById('four-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">
&#9734;</span><span id="three-stars" onclick="vote(3); return false; 
document.getElementById('three-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">
&#9734;</span><span id="two-stars" onclick="vote(2); return false; 
document.getElementById('two-stars').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">
&#9734;</span><span id="one-star" onclick="vote(1); return false; 
document.getElementById('one-star').style.color = '#ff6266'" 
data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">
&#9734;</span>
</div>

CSS

.rating {
    color:#02dbdd;
    font: 700 26px/normal 'Montserrat', sans-serif;
    text-transform:uppercase;
    display:block;
    cursor:pointer;
    margin-right:100px;
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

不确定为什么它不会改变？

（RTL的事情是另一个需要解决的问题......大声笑）

Answer 1

您有三个直接影响测试的不同问题：

您已配置JS Fiddle，以便JS窗格中的代码包含在函数中并在加载时执行。这意味着您的函数不是全局函数，并且内部事件属性不可访问。更改JS Fiddle的配置或重写代码以使用JS而不是HTML绑定事件处理程序。
您尚未配置JS Fiddle来加载jQuery，因此当您尝试调用$.post时会出现错误，因为$未声明。添加jQuery。
在尝试设置颜色之前，您已将return false放入函数中。当然，函数在到达该行之前返回。删除return false。

Answer 2

投票功能不存在。
你的回报是假的，所以它没有改变风格。
您也可以使用此参考元素。
即使这与您的问题无关，您也错过了结束DIV标记。

小提琴：http://jsfiddle.net/nn5ytthL/5/

<div class="rating">
    <span id="five-stars" onclick="vote(5); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 5 stars out of 5">&#9734;</span>
    <span id="fout-stars" onclick="vote(4); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 4 stars out of 5">&#9734;</span>
    <span id="three-stars" onclick="vote(3); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 3 stars out of 5">&#9734;</span>
    <span id="two-stars" onclick="vote(2); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 2 stars out of 5">&#9734;</span>
    <span id="one-star" onclick="vote(1); this.style.color = '#ff6266'" data-toggle="tooltip" data-placement="bottom" title="Rate 1 star out of 5">&#9734;</span>
</div>

Answer 3

当找不到vote（5）函数时，JS停止执行。添加它并从TabControl.Width处理程序的中间删除return然后它就可以了。

onclick

这里更新了小提琴：http://jsfiddle.net/nn5ytthL/4/

更改明星颜色onClick - 为什么这不起作用？

3 个答案: