按钮onclick时按字母顺序堆叠图像(images in alphabetical order are stacked when button onclick)

 功能： 
 
 当用户进入主菜单页面时，图像项目集已经按字母顺序排列和显示。 然后，用户可以选择不同的类别按钮，按钮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>
 
 
 
 
 
 问题： 
 
 当我单击buttonA或buttonB中的任何一个时，相应的图像将添加到当前图像列表中。 
 
 例如，此时，在菜单页面： 
 
 1.）对所有图像进行排序和显示。 
 
 2.）当我点击按钮A时：来自categoryA数组的图像被添加到菜单图像的顶部列表中。 
 
 3.）当我点击按钮B时：来自categoryB数组的图像被添加到菜单图像的顶部列表和显示的categoryA图像。 
 
 因此，所有图像都只是添加到每个显示的列表上。 
 
 因此，在这个时间点，存在附加的和重复的图像。 想问一下，我如何能够如上所述纠正这个问题？ 
 
 谢谢。请帮助。 

Functionality:
 
When users enter the main menu page, the set of image items are already arranged and displayed in alphabetical order. User can then get to choose different category buttons, Button A will return a set of images with the same sorting alphabetical order while button B will return another set of images with the same sorting alphabetical order. 
 
What have I done
 
I have 3 sets of array of image source:
 
1.) All images source 2.) ButtonA category images source 3.) ButtonB category image source
 
I have grab all images from array(All images source), and insert into a particular location say: <div class="Container"><div id= "list" class="innerScroll"></div></div>. The images are then displayed in accordance to alphabetical order.
 
This is the code for your perusal.
 
 
 
 
 
  
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>
 
 
 
 
 
Issue:
 
When I click on either of buttonA or buttonB, the respective images are added onto the current list of images.
 
For Example, at this point in time, at the menu page:
 
1.) all images are sorted and displayed.
 
2.) when I clicked on the button A: the images from categoryA array is added into the list ontop of the menu image. 
 
3.) when I clicked on the button B: the images from categoryB array is added into the list ontop of the menu image and categoryA image that is displayed. 
 
Hence, all the images are just adding onto each displayed list.
 
Hence, at this point in time, there are additional and repeated image. Would like to ask, how am I able to rectify the issue as described?
 
Thanks.please help.

原文：https://stackoverflow.com/questions/36348068