Рейтинг фильмов KnockoutJs

by ZondArt

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="films">
    <div class="film">
        <img class="poster" src="http://st-im.kinopoisk.ru/im/poster/2/1/7/kinopoisk.ru-RIPD-2175996.jpg" alt="">
        <h1>RIPD</h1>
        <p>Детективы из загробного департамента расследуют преступления по ту сторону могилы и гоняются за не в меру ретивой нечистью. Молодой коп, после гибели от руки неизвестного злоумышленника угодивший в мир иной, в обмен на помощь при расследовании собственного убийства обязуется следующие сто лет посвятить службе в R.I.P.D. и, получив в напарники брутального стрелка эпохи вестернов, выходит на борьбу с неупокоившимся злом.</p>
        <ul class="rating">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

CSS

.films {
    
}

.film {
    width: 250px;
    background-color: #6FF;
}

.poster {
    width: 250px;
    height: 125px;
}

ul {
    display: inline-block;
    margin: 0 auto;
    width: 160px;
}

ul li {
    margin-left: 4px;
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("http://www.iconsearch.ru/uploads/icons/icojoy/24x24/001_17.png");
    background-repeat: no-repeat;
}

ul li:hover {
    background-image: url("http://www.iconsearch.ru/uploads/icons/icojoy/24x24/001_15.png");
    cursor: pointer;
}

.ratein {
    background-image: url("http://www.iconsearch.ru/uploads/icons/icojoy/24x24/001_15.png");
}

JavaScript

$(".rating").on("mouseover", "li", onStarMouseOver);
$(".rating").on("mouseout", "li", onStarMouseOut);


function onStarMouseOver(e){
    $(this).prevAll().addClass("ratein");
    console.log(1);
};
function onStarMouseOut(e){
    $(this).prevAll().removeClass("ratein");
};



films = ko.observableArray([
    {   name: "RIPD",
        posterURL: "http://st-im.kinopoisk.ru/im/poster/2/1/7/kinopoisk.ru-RIPD-2175996.jpg",
        text: "Детективы из загробного департамента расследуют преступления по ту сторону могилы и гоняются за не в меру ретивой нечистью. Молодой коп, после гибели от руки неизвестного злоумышленника угодивший в мир иной, в обмен на помощь при расследовании собственного убийства обязуется следующие сто лет посвятить службе в R.I.P.D. и, получив в напарники брутального стрелка эпохи вестернов, выходит на борьбу с неупоко" ,
        defaultRate: 3        
    },        
]);