时间戳

首页 > 解决方案 > 循环问题 - AJAX/jQuery

php - 循环问题 - AJAX/jQuery

问题描述

所以我花了一些时间将用户图片添加到我们拥有的投票功能中，一切都运行良好，但是我们注意到当用户图片显示为谁投票时，它会重复两次结果，而不是一排图片每件。

因此，每个项目都会显示用户图片（对投票 ID 进行投票的人），但会重复该行。

这与$.each()有关系吗？如何在不创建答案副本且不只显示 1 张图片的情况下遍历每一行（id 列）的照片？

function fetchPollData() {
    $(function(){});
        $.ajax({
            url: "ajax_pollresults.php",
            method: "GET",
            dataType: 'JSON',
            success: function (data) {          
                var html_to_append = '';
                $.each(data, function (i, item) {
                    var scase = (item.votes > 1) ? 'votes' : 'vote';
                    html_to_append +=
                        '<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
                        item.title +
                        ' - <span style="font-weight:bold">' + item.votes + ' ' + scase + ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" /></span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b>&nbsp;' + scase + ' </div></div></div></div>';
                });
                $("#recent-poll").html(html_to_append);
                $('.tooltip-polluser').tooltipster({
                    animation: 'grow',
                    delay: 200,
                    theme: 'tooltipster-punk'
                });
            }
        });
}
fetchPollData();
setInterval(function () {
    fetchPollData()
}, 10000);

我们无法解决的错误：

结果错误

似乎每个投票项目只显示 1 个用户，而忽略了该行的其余部分。

我们的 SQL 查询：

SELECT 
    poll_answers.id AS id,
    IFNULL(poll_users.user_id, '') AS user_id,
    IFNULL(users.username, '') AS username,
    poll_answers.poll_id,
    poll_answers.title,
    poll_answers.votes,
    poll_users.added AS date,
    IFNULL(users.avatar_thumb,
            'images/poll_avatarfix.png') AS avatar
FROM
    poll_answers
        LEFT JOIN
    poll_users ON poll_users.poll_id = poll_answers.poll_id
        LEFT JOIN
    users ON users.user_id = poll_users.user_id

和数据库结果：

在此处输入图像描述

我花了一个晚上的时间编写这个 SQL 查询，所以我不确定这是不是没有带出所有头像的查询，还是它的 jQuery。

任何帮助是极大的赞赏！

标签： phpjquerymysqlajaxloops

解决方案

您将希望在内部循环中获取每个选民图像。您可以执行以下操作...

不要只使用一条记录，而是调用类似的东西getVoteImages()并传入您正在寻找的投票ID。这将获取您的所有图像并将它们附加到一个字符串然后返回它。可能有更快、更优雅的方法来做到这一点，但这应该可行。

$.each(data, function (i, item) {
            var scase = (item.votes > 1) ? 'votes' : 'vote';
            html_to_append +=
                '<div class="content poll-result"><div class="wrapper"><div class="poll-question"><p>' +
                item.title +
                ' - <span style="font-weight:bold">' + item.votes + ' ' + scase + getVoteImages(data, item.poll_id)  + "</span></p><div class="result-bar" style="width:' + roundVotes(item.votes) + '%"><b>' + item.votes + '</b>&nbsp;' + scase + ' </div></div></div></div>';
        });

function getVoteImages(data, poll_id) {
        var images = "";
        $.each(data, function (i, item) {
            if (item.poll_id == poll_id) {
                images += ' <img class="tooltip-polluser" title="' + item.username + ' - Voted: ' + item.title + '" href="/user/?id=' + item.user_id + '" style="width:25px;height:25px;border-radius:50%;margin-left:10px;vertical-align:middle" src="/' + item.avatar + '" />';
            }
        });

        return images;
    }

推荐阅读