Question

通过下拉框，以下功能运行。它会通过#containerFriendsConnected将用户所连接的朋友的图像放到页面上。但是，如果用户从下拉框中多次选择“已连接的朋友”，则会复制用户图像。

假设用户有2个朋友，如果单击下拉框选项3单独时间，页面将重复2个朋友并在页面上各显示3次（总共6张图片）。

我认为我需要添加一些简单的if语句来阻止它？像

这样的东西

For (var i = 0; i < results.length; i++) {

                                        });

这就是我被困住的地方。

重复图像的功能

                function FriendsConnected() {
                    $('#containerFriendsRejected').empty();
                    $('#containerFriendsPending').empty();
                    $('#containerFriendsRequestSent').empty();
                    var currentUser = Parse.User.current();
                    var FriendRequest = Parse.Object.extend("FriendRequest");

                    var query = new Parse.Query(FriendRequest);
                    query.include('toUser');
                    query.include('SentTo');
                    query.include("myBadge");
                    query.equalTo("fromUser", currentUser);
                    query.equalTo("status", "Connected");

                    query.find({
                        success: function(results) {
                            var friends = [];
                            for (var i = 0; i < results.length; i++) {
                                friends.push({
                                    imageURL: results[i].get('toUser').get('pic'),
                                    friendRequestId: results[i].id,
                                    username: results[i].get('toUser').get('username'),
                                    userId: results[i].get('toUser').id


                                });


                            }
                            var select = document.getElementById("FriendsConnected");
                            $.each(friends, function(i, v) {
                                var opt = v.username;
                                var el = document.createElement("option");
                                el.textContent = opt;
                                el.value = opt;
                                select.appendChild(el);
                            })

                        _.each(friends, function(item) {
                             var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
                            wrapper.append('<img class="responsive-image friendImgOutline" src="' + item.imageURL + '" />'+ '<br>');
                            wrapper.append('<div class="tag">' + item.username + '</div>');
                            $('#containerFriendsConnected').append(wrapper);
                            });

                        },
                        error: function(error) {
                            alert("Error: " + error.code + " " + error.message);
                        }
                    });
                }

Answer 1

我通过使用.empty（）;

解决了这个问题

在以下一点

$('#containerFriendsConnected').empty();

 _.each(friends, function(item) {
                             var wrapper = $('<div class="portfolio-item-thumb one-third"></div>');
                            wrapper.append('<img class="responsive-image friendImgOutline" src="' + item.imageURL + '" />'+ '<br>');
                            wrapper.append('<div class="tag">' + item.username + '</div>');
                            $('#containerFriendsConnected').append(wrapper);
                            });

运行功能后，如何停止页面上显示结果的重复？

1 个答案: