0

私の smarty テンプレートには、デフォルトの星評価システムがあります。デスクトップユーザーには最適ですが、モバイルデバイスでは、常に間違った値をタップすることがわかりました。ユーザーが星をタップしたときに自動的に送信するのではなく、評価を送信するボタンを追加できたらいいのにと思います。

        $(document).ready(function(){
            $(".one-star, .two-stars, .three-stars, .four-stars, .five-stars").click(function() {
                $("#current_rating").width($(this).html()*30);
                $.ajax({data: ({ action: 'save_rating', rating: $(this).html(), listing_id: <?php echo $id; ?>}), success: function() { window.location.href = '<?php echo $this->escape(URL); ?>'; }});
                return false;
            });
        });

            <ul class="star-rating">
                <li id="current_rating" class="current-rating" style="width:<?php echo $rating*30; ?>px;"><?php echo $rating; ?> Stars.</li>
                    <li><a href="#" title="1 star" class="one-star">1</a></li>
                    <li><a href="#" title="2 stars" class="two-stars">2</a></li>
                    <li><a href="#" title="3 stars" class="three-stars">3</a></li>
                    <li><a href="#" title="4 stars" class="four-stars">4</a></li>
                    <li><a href="#" title="5 stars" class="five-stars">5</a></li>
            </ul>
4

2 に答える 2

1

ダイアログボックスを使用してユーザーの選択を確認するのはどうですか?

    $(document).ready(function(){
        $(".one-star, .two-stars, .three-stars, .four-stars, .five-stars").click(function() {

            var currentrating = $(this).text()
            var r = confirm("Do you want to submit a rating of " + currentrating + "?") 

            if(r==true){ 

                 $("#current_rating").width($(this).html()*30);

                 $.ajax({data: ({ action: 'save_rating', rating: $(this).html(), listing_id: <?php echo $id; ?>}), success: function() { window.location.href = '<?php echo $this->escape(URL); ?>'; }});

                 return false;

            } else {

                 return false;

            }
        });
    });



        <ul class="star-rating">
            <li id="current_rating" class="current-rating" style="width:<?php echo $rating*30; ?>px;"><?php echo $rating; ?> Stars.</li>
                <li><a href="#" title="1 star" class="one-star">1</a></li>
                <li><a href="#" title="2 stars" class="two-stars">2</a></li>
                <li><a href="#" title="3 stars" class="three-stars">3</a></li>
                <li><a href="#" title="4 stars" class="four-stars">4</a></li>
                <li><a href="#" title="5 stars" class="five-stars">5</a></li>
        </ul>
于 2012-06-22T12:34:17.487 に答える
1

この要素を html パーツに追加します。

<input type=button id=submit_rating value="submit rate" />

jquery コードを次のように変更します。

$(document).ready(function(){
        var rate=null;
        $(".one-star, .two-stars, .three-stars, .four-stars, .five-stars").click(function() {
             rate = $(this).html();
             $("#current_rating").width(rate*30);
        });
        $('#submit_rating').click(function(){
                $.ajax({data: ({ action: 'save_rating', rating: rate, listing_id: <?php echo $id; ?>}), success: function() { window.location.href = '<?php echo $this->escape(URL); ?>'; }});
                return false;
        });
    });
于 2012-06-22T12:45:23.847 に答える