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

如何使用对话框确认用户的选择？

    $(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>

Answer 2

将此元素添加到您的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;
        });
    });

添加提交按钮到jquery星级评级

2 个答案: