javascript - 我可以使用 .click 在返回多个结果的查询中仅定位一个结果吗？

Question

此代码块返回多个结果，然后在页面上向用户显示。当用户点击此处的任何按钮时

wrapper.append('<div type="button" class="btn btn-danger mrs decline">' + 'Unfriend' + '</div>');

不是只拒绝一个对象，而是所有对象都被拒绝。这不是我想要的。

为了正确地实现此功能，是否应该使用类似以下内容的内容？

        $('.decline).css('cursor', 'pointer');

--

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



                        // Saves the object so that it can be used below to change the status//
                        fetchedObject: results[i]


                    });


                }
                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);
                })


                $('#containerFriends').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>');
                    wrapper.append('<div type="button" class="btn btn-danger mrs decline">' + 'Unfriend' + '</div>');

                    $('#containerFriends').append(wrapper);
                    //The following lets the user accept or decline a friend request by changing the status the status from Pending to Declined/////
                    $(document).on('click', function() {
//Note 1////
                        $(".decline").click(function() {
                            item.fetchedObject.set("status", "Rejected");


                            item.fetchedObject.save(null, {
                                success: function(results) {
                                    console.log("REJECTED");

                                },
                                error: function(contact, error) {
                                    // The save failed.
                                    // error is a Parse.Error with an error code and description.
                                    alert("Error: " + error.code + " " + error.message);
                                }
                            });


                        });

Answer 1

您需要将处理程序仅绑定(bind)到特定元素，而不是所有 .decline 元素。删除 $(document).on('click', ...) 处理程序，并将其更改为:

wrapper.children('.decline').click(function() {
    ...
});