更新動態創建的對象值而無需刷新頁面

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示例即可。