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 に答える