Question

我有来自ajax的以下数据，我试图在UI的弹出窗口中显示：

[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},

{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/beyond.png"},

{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}]

我使用下面的Jquery在弹出窗口中显示它：

$.each(data, function(index, value) {
  var $img = $('<img src="' + data[index].BadgeImage + '"/>'); // create the image
  $img.addClass('badge-image'); // add the class .badge-image to it

  $('#imagesofBadges').append($img); // append it
  $('#imagesofBadges .badge-image'); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.

});

我能够显示图像。

问题是每次我点击一个显示弹出窗口的元素时，上一个弹出窗口的图像会附加到新弹出窗口中。

我尝试使用jquery中存在的one（）并尝试使用如下代码中的计数器，但没有运气。

$.each(data, function(index, value) {
  var $img = $('<img src="' + data[index].BadgeImage + '"/>'); // create the image
  $img.addClass('badge-image'); // add the class .badge-image to it
  if (counter <= 0) {
    $('#imagesofBadges').append($img); // append it
    $('#imagesofBadges .badge-image'); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
    counter++;
  }
});

请帮我介绍一下如何显示图片，这样就不会将其附加到弹出窗口的先前数据中。

Answer 1

您需要清除容器的先前内容，您可以使用.empty()

从DOM中删除匹配元素集的所有子节点。

$group

Answer 2

试试这个 - .append()会将之前的html附加到新的html，.html()将为您覆盖旧的HTML

 $('#imagesofBadges').html($img);

append函数使用新数据附加以前的数据

2 个答案: