Question

我正在尝试更新一个.append，该.append内部具有一个动态变量，该变量从Web服务接收数据。我得到了数据，但是如何更新保存动态变量的div？我的情况下，我想将多个添加到.append

这是我到目前为止所拥有的：

var dynamic = ""; // global variable

var wishlist = ""; // global variable

$('#QuickAccessContainer').append(''
  + '<div id="settings"></div>'
  + '<div id="GameContainer">'
  + dynamic
  + '</div>'
  + '<div id="GameWishlist">'
  + wishlist 
  + '</div>'
  + '<div id="profile"></div>'
);


$('clickme').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get favorite game list of user
        }).success(function (data) {

        var dynamic = ""; // resets the content of dynamic if loaded again

        for (i = 0; i < data.length; i++) {

        dynamic += '<div> data[i].gameName </div>' // generate list of games
     };
  })

});

$('clickmeToo').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get wishlist of user
        }).success(function (data) {

        var wishlist = ""; // resets the content of dynamic if loaded again

        for (i = 0; i < data.length; i++) {

        wishlist += '<div> data[i].gameName </div>' // generate list of games
     };
  })

});

问题是我猜DOM（？）div-gamecontainer首先加载并获取了变量，当用户单击按钮并且json返回收藏夹列表时，我将如何更新该变量（动态）。我尝试在循环之后添加一个附加的.append，如下所示：

      $('#GameContainer').append(''
         + '<div id="GameContainer">'
         + dynamic
         + '</div>');

      }; // end of success

但在这种情况下，.append随每次点击堆积起来

Answer 1

您可以使用jquery添加和删除元素

var $dynamicElement = $('<div id="GameContainer"></div>'); // global variable

$('#QuickAccessContainer').append($dynamicElement);


$('clickme').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get favorite game list of user
        }).success(function (data) {

        $dynamicElement.empty(); // resets the content of dynamic if loaded again

        var divs = '';
        for (var i = 0; i < data.length; i++) {

            divs += '<div>' + data[i].gameName + '</div>' // generate list of games
        };

        //append to dynamic element holder
        $dynamicElement.append($(divs));
  })

});

Answer 2

代替使用全局变量dynamic，而使用appendToQuickAccessContainer之类的函数，并将目标children的{{1}}作为字符串传递。然后在函数内部执行dom操作。更干净安全。这就是我的做法。

div

function appendToQuickAccessContainer(children) {
  var $quickAccessContainer = $('#QuickAccessContainer');
  var $gameContainer;

  if ($quickAccessContainer.children('div#GameContainer').length === 0) {
    $gameContainer = $quickAccessContainer.append($("<div/>", {
      id: 'GameContainer'
    }));
  } else {
    $gameContainer = $quickAccessContainer.find("#GameContainer");
  }
  $gameContainer.append(children);
}

$('.clickme').on("click", function() {

  $.ajax({
    method: 'GET',
    url: "https://jsonplaceholder.typicode.com/todos/"
  }).done(function(data) {
    var domString = "";
    for (i = 0; i < data.length; i++) {
      domString += '<div>' + data[i].title + '</div>';
    }

    appendToQuickAccessContainer(domString);
  })

});


$('.anthoer-clickme').on("click", function() {

  $.ajax({
    method: 'GET',
    url: "https://jsonplaceholder.typicode.com/users"
  }).done(function(data) {
    var domString = "";
    for (i = 0; i < data.length; i++) {
      domString += '<div>' + data[i].email + '</div>';
    }

    appendToQuickAccessContainer(domString);
  })

});

当通过JSON响应更新全局变量时，更新.Append div

2 个答案: