更新动态创建的对象值而无需刷新页面

Question

这可能是一个愚蠢的问题（并非没有愚蠢的问题是不对的）..但是这里有。 我将列出我在做什么：

1）用户登录到页面，首先发生的是使用php从MySQL数据库中提取对象列表。 它通过json_encode（）返回一个对象数组。

然后页面为每个对象动态构建一个DOM元素，并通过jQuery $（'container'）。append（.....>。追加到容器中。这是通过循环和被分配为javascript的php变量发生的变量..代码的重要部分：

 for(var i = 0, len = userObjects.length; i < len; i++){
     var currentObject = userObjectsObjects[i];
     var isCurrentFavorite = isFavorite(currentObject.isFavorite);

     var ratings = buildRatingString(currentObject.ratings, currentObject.raters);

    if(count % 4 !=0){
        $(".content").append('<div class=col-md-3>.............');   
        count++;
    }else if(count % 4 == 0){
        $(".content").append('<div class=col-md-3>........');
        count++;
    }
    $(".content").append('</div></div>');
}

这将构建一个DOM元素并放置相应的currentObject。 放入适当的位置并显示在页面上。

所有的一切都很好。 这并不理想（我愿意就如何优化该过程提出建议，因为在我看来这很令人费解），但它确实可行。

我的问题：

用户可以单击心脏以添加到他们的收藏夹。 单击将击中一个函数，在该函数中进行检查以查看该对象当前是否被收藏，并通过ajax调用采取适当的操作。

当前，我知道如何获取objectId的唯一方法是将其设置为“收藏夹”按钮的ID。 单击按钮（已隐藏并且心脏图标在其位置）时，它将信息发送到函数toggleFavorites（）并将信息发送到数据库。

<button type="button" id="'+currentObject.objectId+'"></button>  

代码：（objId是从^^^^^上方的按钮分配的ID）

function toggleFavorite(objId, isFav){
var value = isFav;
var objectId= objId;

    var toTable = '';
    if(value == 'Y'){
        toTable = 'N';
    }else if(value == 'N'){
        toTable = 'Y';
    }
ajaxIt(toTable, recipeId);
    function ajaxIt(toTable, objectId){
                $.ajax({
                        type: 'post',
                        url: '../PHP/update_favorite.php',        
                        data: {isFavorite: toTable, objectId: objectId},      
                        success: function(){
                             if($('#heart' + objectId).hasClass("redClass")){
                                    $('#heart' + objectId).addClass('grayClass')                                      
                                    $('#heart' + objectId).removeClass("redClass");

                                }else if($('#heart' + objectId).hasClass("grayClass")){
                                    $('#heart' + objectId).removeClass("grayClass");
                                    $('#heart' + objectId).addClass('redClass');


**I WANT TO UPDATE THE OBJECT IN HERE**
                                }  

                }
            });
    return false;        
    }

}

根据对象当前是否为收藏夹来设置此变量。 初始对象拉动时。 因此，如果当前是收藏夹，并且用户单击心脏。.var toTable将='N'（从收藏夹中删除）..反之亦然。

我在ajax成功函数中手动设置了心脏颜色，但是由于遇到了这个问题，我需要更改实际对象：

如果该对象当前是收藏夹，则在将其拉出时用isFavorite：'Y'表示。 您单击心脏，并且ajax正确地向表发送了“ N”。 心脏从红色变成灰色。 如果单击心脏以再次添加到收藏夹而不进行页面刷新，则isFavorite仍为“ Y”（未使用更新的表值提取新对象），并且仍将“ N”发送到表。

是否可以像这样更新动态创建的对象，以便在调用toggleFavorite（）函数时，它具有正确的表值？

抱歉，这太罗word了……我还没有编程知识或词汇，但更简洁了。

Answer 1

您拥有的实现实际上是复杂的，可以使用任何前端框架（例如angular 1/2/4/5或reactjs或其他）简化。

对于使用普通的JQuery，您应该更新对象而不是更新DOM。 更新对象后，您已经知道与该ID对应的DOM，并且必须对其进行更新。 或制作一个将使用新对象并重新渲染整个DOM部分的函数。 首先是优选的。 我知道这只是一些伪逻辑，但是它是如此简单以至于不需要任何解释。 我很乐意聊天以解释更多信息。 同样，如果您使用框架，那将变得非常简单。 只需尝试查看任何框架的hello world示例即可。