Question

这可能是一个愚蠢的问题（没有愚蠢的问题，这是不正确的）......但是这里有。我将列出我正在做的事情：

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

然后页面为每个对象动态构建DOM元素，并通过jQuery $（＆＃39; container＆＃39;）附加到容器中。append（.....＆gt;。这通过循环和一个php变量，被赋值为javascript变量..代码的重要部分：

 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将=＆＃39; N＆＃39; （从收藏夹删除）..反之亦然。

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

如果对象目前是最喜欢的，则由isFavorite表示：＆＃39; Y＆＃39;当物体被拉动时。你点击心脏和ajax正确发送一个＆＃39; N＆＃39;到了表..我已经证实有效。心脏从红色变为灰色。如果您点击心脏再次添加到收藏夹而没有页面刷新，则收藏夹仍然是＆＃39; Y＆＃39; （没有使用更新的表值拉出新对象）并且它发送了一个＆＃39; N＆＃39; N＆＃39; N＆＃39;到了桌子还在。

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

对不起，这太啰嗦了......我没有编程知识或词汇，但还不够简洁。

Answer 1

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

对于使用普通JQuery，您应该更新对象而不是更新DOM。更新对象后，您已经知道哪个DOM对应于您必须更新的ID并更新相同的DOM。或者创建一个将获取新对象并重新渲染整个DOM部分的函数。首先是优选的。我知道这只是一些伪逻辑，但这很简单，不需要任何解释。我很乐意聊天来解释更多。此外，如果您使用框架，它将变得简单。试试看任何框架问候世界的例子。

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

1 个答案: