0

单击任何星后，我想将类中的值从左向右移动并返回。下面的图片可能有助于想象我想要实现的目标。在这种情况下，我希望在单击星号后将“4.0”向右移动并返回。（4.0 是 Rails 生成的值。）

在此处输入图像描述

我正在尝试从w3schools应用以下代码。它在jsfiddle上的示例中确实有效，但在我的代码中无效。其他一切都很好。

我在这里想念什么？非常感谢。

HTML

    <ul>
    <li><a href="#/routes/1">Route 1</a>
        <div id="Route1" class="rate_widget">
        <div class="star_1 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 1 ? "ratings_vote" : "" %>" data-score="1"></div>
        <div class="star_2 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 2 ? "ratings_vote" : "" %>" data-score="2"></div>
        <div class="star_3 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 3 ? "ratings_vote" : "" %>" data-score="3"></div>
        <div class="star_4 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') >= 4 ? "ratings_vote" : "" %>" data-score="4"></div>
        <div class="star_5 ratings_stars <%= Score.average('score', :conditions => 'route_id = 1') == 5 ? "ratings_vote" : "" %>" data-score="5"></div>
        </div>  
        <div class="total_votes"><%= "%0.1f" %  Score.average('score', :conditions => 'route_id = 1') %></div>      
    </li>
</ul>

CSS

.ratings_stars 
    {
    background: url('star_empty.png') no-repeat;
    float:      left;
    height:     28px;
    padding:    2px;
    width:      32px;
    }

.total_votes 
    {
    background: yellow;
    top: -10px;
    margin: 12px 0px 10px 0px;
    padding: 1px 0px 0px 5px;
    position: relative;  
    width: 170px;
    height: 17px;
    line-height: 1;
    color: red;
    }

jQuery

// This records the vote
        $('.ratings_stars').on('click', function() {
        var score=$(this).attr("data-score");
        var route_id=$(this).parent().attr("id").replace('Route', '');  


// This moves the score to the right
      $('.ratings_stars').click(function() {
        $('.total_votes').animate({left:'50px'}, 500)
          $('.total_votes').animate({left:'0px'}, 500);
      });

            $.post(
                '/scores',  // this sends the voting data to the page '/scores'
                {
            "score[score]": score,
            "score[route_id]": route_id
        },
                function() { 
            alert('Thank you for your vote.');
4

1 回答 1

1

您将需要为text-indent属性设置动画以在其容器内移动文本<div class="total_votes">。

以下代码将完成剩下的工作：

$("div.ratings_stars").on("click", function () {
        var $this = $(this);
        $this.parents("li").find("div.total_votes")
                 .animate({'text-indent': '150px'})
                 .delay(100)
                 .animate({'text-indent':'0px'});
    });

这是jsfiddle上工作代码的链接。

于 2013-05-07T01:26:36.167 回答