Question

我正在创建一个星级评分系统并且它可以正常工作，但需要在页面加载时显示当前的投票数量，并且由于插件源代码及其代码我必须使用的代码实现此问题。 ajax不是一种非常熟悉的语言。

当通过选择评级来激活点击处理程序但是真的不确定我是否需要添加到当前函数或创建新函数时，它将当前投票放入我希望它的元素中，如果是这样，我该怎么做？让它不与当前的冲突。

提前感谢。

<!DOCTYPE html>
<html lang="en">
<?php require 'core/init.php'; ?>
<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <table>
            <tr>
                <td><div id="randomtest" class="star"></div></td>
                <td id="cvotes"></td>
            </tr>
        </table> 
    </div>

    <script type="text/javascript" src="star/assets/js/jquery.raty.min.js"></script>
    <script type="text/javascript">

    $(function() {
        $.fn.raty.defaults.path = 'star/assets/img';
        $('.star').raty({

            half      : true,
            number    : 5,
            score     : 3,

            click: function(score, evt) {
            /*implement this for only click once 
             * $(this).find('img').unbind('click');
             */

            var pid=$(this).prop('id');

                $.ajax({
                url: 'rate.php',
                data: { score: score, pid:pid },
                type: 'POST',

                success: function (data) {
                    $('#cvotes').empty().append(data + ' Votes.'); // this needs to be done on page load too!
                },
                error: function (jxhr, msg, err) {
                    $('#cvotes').append('<li style="color:red">' + msg + '</li>');
                }
                });
            }
        });
    });
    </script>
</body>
</html>

Answer 1

您应该知道，由于您使用#cvotes作为页面上的唯一元素，无论您在页面上有多少个.star元素，每个结果都会显示在此单个元素上。

要在您启动raty插件后必须在正确的时间加载评级数据，您必须执行ajax get请求。

你应该在插件代码中真正做到这一点，但是在像这样的页面上做这件事也应该有效

<script type="text/javascript">

$(function() {

    function onRateResultsSuccess(data) {
        $('#cvotes').empty().append(data + ' Votes.'); 
    }

    function onRateResultsError(data) {
        $('#cvotes').append('<li style="color:red">' + msg + '</li>');
    }

    $.fn.raty.defaults.path = 'star/assets/img';
    $('.star').raty({

        half      : true,
        number    : 5,
        score     : 3,

        click: function(score, evt) {
        /*implement this for only click once 
         * $(this).find('img').unbind('click');
         */

        var pid=$(this).prop('id');

            $.ajax({
            url: 'rate.php',
            data: { score: score, pid:pid },
            type: 'POST',

            success: onRateResultsSuccess,
            error: onRateResultsError
            });
        }
    });

    // this should really be inside the raty plugin init as well as the click handler

    // for every .star element
    $('.star').each(function () {

            var pid=$(this).prop('id');

            // use http get
            $.get('rate.php', { pid:pid } ,onRateResultsSuccess).fail(onRateResultsError);
    });
});
</script>

页面加载时获取ajax响应？

1 个答案: