javascript - 添加提交按钮到 jquery 星级评定

Question

我的 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>

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