添加提交按钮以 jquery 星级评定

Adding submit button to jquery star rating

本文关键字：jquery 提交 按钮 添加      更新时间：2023-09-26

我的智能模板中有一个默认的星级评定系统。 它非常适合桌面用户，但在移动设备中，我发现我总是点击错误的值。我希望我可以添加一个按钮来提交我的评分，而不是在用户点击星星时自动提交。

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

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

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

    $(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>
相关文章：