循环问题 - AJAX/jQuery

Posted 2023-05-09

【中文标题】循环问题 - AJAX/jQuery

【英文标题】：Looping Issue - AJAX/jQuery

【发布时间】：2021-04-06 10:59:13

【问题描述】：

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

因此，每个项目都会显示用户图片（对投票 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。

非常感谢任何帮助！

【参考方案1】：

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

不要只使用一条记录，而是调用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;
    

【讨论】：

效果太棒了！谢谢，也许我可以使用这种方法来提取答案，这样它们就不会重复两次（或者这是我的 SQL 查询的问题）。感谢您的宝贵时间