单击按钮时按字母顺序排列的图像

Question

功能：

当用户进入主菜单页面时，图像项集已经按字母顺序排列和显示。然后用户可以选择不同的类别按钮，按钮 A 将返回一组具有相同排序字母顺序的图像，而按钮 B 将返回另一组具有相同排序字母顺序的图像。

我做了什么

我有 3 组图像源数组：

1.) 所有图片来源 2.) ButtonA 类别图片源 3.) ButtonB类图片来源

我已从数组（所有图像源）中获取所有图像，并插入到特定位置，例如：<div class="Container"><div id= "list" class="innerScroll"></div></div>。然后按照字母顺序显示图像。

这是供您阅读的代码。

var BrandNameArray = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000',
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];

var CategoryA = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000'
];
var CategoryB = [
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];
$(function() {
  //Append array of images to list container in alphabetical Order
  BrandNameArray.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);
});

function CatA() {


  //Append array of images to list container in alphabetical Order
  CategoryA.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);

}

function CatB() {

  CategoryB.forEach(function(cur, index, arr) {
    var img = document.createElement('img');
    img.src = cur;
    docFrag.appendChild(img);
  });
  container.appendChild(docFrag);
}

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow-y: scroll;
}
#CatA {
  width: 400px;
  height: 350px;
}
#CatB {
  width: 400px;
  height: 350px;
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;">
  <div class="Container">
    <div id="list" class="innerScroll"></div>
  </div>
  <button id="CatA" onclick="CatA()">
  </button>
  <button id="CatB" onclick="CatB()">
  </button>

问题：

当我单击按钮 A 或按钮 B 时，相应的图像会添加到当前图像列表中。

例如，此时，在菜单页面：

1.) 对所有图像进行排序和显示。

2.) 当我单击按钮 A 时：categoryA 数组中的图像被添加到菜单图像顶部的列表中。

3.) 当我单击按钮 B 时：categoryB 数组中的图像被添加到菜单图像和显示的 categoryA 图像顶部的列表中。

因此，所有图像都只是添加到每个显示的列表中。

因此，在这个时间点，有额外的和重复的图像。想问一下，我该如何纠正描述的问题？

谢谢。请帮忙。

Answer 1

我觉得您忘记在添加之前从容器中删除所有图像。 所以这样做，它应该可以工作。如果它解决了你的问题，请告诉我

var myNode = document.getElementById("foo");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);

}

你也可以查看这个问题Remove all child elements of a DOM node in JavaScript