Изменение цвета звезды onClick - почему это не работает?

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

Не знаю, почему он не изменится?

(The РТЛ вещь совершенно другая проблема, для решения ... лол)

Answer 1

1. функция голосование не существует.
2. Вы вернули ложную информацию, так что она не дошла до смены стиля.
3. Вы также можете ссылаться на элемент с этим.
4. Вам также не хватало закрывающего тега DIV, хотя это не имело никакого отношения к вашей проблеме.

Fiddle: 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 2

JS выполнение остановки, когда он не может найти голоса (5) функции. Добавьте его и удалите return с середины onclick обработчика, тогда он работает.

function vote(){} 

Здесь обновлена ​​скрипку: http://jsfiddle.net/nn5ytthL/4/

Answer 3

У вас есть три проблемы, которые непосредственно влияют тест:

1. Вы настроили JS скрипку так, что код на панели JS обернут функция и выполняется при загрузке. Это означает, что ваша функция не является глобальной и недоступна для атрибутов встроенных событий. Измените конфигурацию JS Fiddle или перепишите код для привязки обработчиков событий с помощью JS вместо HTML.
2. Вы не настроили JS Fiddle для загрузки jQuery, поэтому, когда вы пытаетесь вызвать $.post, это ошибки, потому что $ не объявлен. Добавьте jQuery.
3. Вы поставили функцию return false перед тем, как попытаться установить цвет. Естественно, функция возвращается до того, как она достигнет этой строки. Снимите return false.