如何从数组加载时进行分类

1 回答

• 0

  我想你可以根据下面的类别对 items 数组进行排序

  var order = ['avian','carnivores','herbivores'];
  items.sort((a,b) =>
    order.indexOf(a.type)-order.indexOf(b.type)
  );
  

  这将给出项目将根据 order 数组分组的结果数组

  var array2 = [];
  
  /** Update items with TYPE */
  var items = [{
      label: 'pigeon',
      type: 'avian',
      url: 'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
    },
     {
      label: 'beer',
      type: 'carnivores',
      url: 'https://i.ibb.co/qJs512z/cpolar-bear.png'
    },
    {
      label: 'parrot',
      type: 'avian',
      url: 'https://i.ibb.co/TwPtqx5/bparrot.jpg'
    },
   
    {
      label: 'zebra',
      type: 'herbivores',
      url: 'https://i.ibb.co/BPPvLpt/hzebra.png'
    }
    
  ];
  var tempimages = [];
  var order = ['avian','carnivores','herbivores'];
  items.sort((a,b) =>
    order.indexOf(a.type)-order.indexOf(b.type)
  );
  
  array2 = items.slice();
  var item;
  
  function rvalue() {
    elements = document.getElementsByClassName("box");
    ptags = document.querySelectorAll('[name="values"]');
    boxtags = document.getElementsByClassName("box");
  
    for (let index = 0; index < 2; index++) {
  
      item = array2[index];
      //console.log(item);
      try {
  
        ptags[index].textContent = item.label;
  
        ptags[index].dataset.itemLabel = item.url;
        // ptags[index].style.visibility = "hidden";
  
        boxtags[index].style.backgroundImage = 'url(' + item.url + ')';
       
        if($(boxtags[index]).find("p").length === 0){
           $(boxtags[index]).append(ptags[index])
        }
        tempimages.push({
          data: item,
          index: index
        });
  
      } catch (err) {
        // console.log('Exception');
      }
    }  
    //console.log(tempimages);
  }
  
  rvalue();
  
  
  function allowDrop(ev) {
    ev.preventDefault();
  }
  
  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }
  
  function drop(ev) {
  
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var pText = $("#" + data).children()[0].id;
  
    // Get the label
    var label = $.trim($("#" + data).text().toLowerCase());
  
    // Check the item type
    var isBird = !!items.find(i => i.label.toLowerCase() === label && i.type === 'avian');
  
    if (ev.target.className === 'boxleft' && !isBird) {
  
    } else if (ev.target.className === 'boxright' && isBird) {
  
    } else {
      alert('Wrong box for the selected item');
      return false;
    }
  
    $("#" + pText).removeClass("hidden");
    ev.target.appendChild(document.getElementById(pText));
    // ptags[index].style.visibility = "visible";
    
    var removeByAttr = function(tempimages, index, value){
    var i = tempimages.length;
    while(i--){
      if( tempimages[i] 
        && tempimages[i].hasOwnProperty(index) 
        && (arguments.length > 2 && tempimages[i][index] === value ) ){ 
          tempimages.splice(i,1);
  		array2.splice(i,1);
  
        }
     }
     return tempimages;
  }
    
    
    var index = items.findIndex(i => i.label.toLowerCase() === label)
    removeByAttr(tempimages, 'index', index)
   
    if (tempimages.length == 0) {  
              rvalue();  
              $(".boxleft,.boxright").html("")
          }
    
   
  }
  

  #box1 {
    position: absolute;
    top: -10.3vh;
    left: -30.98vw;
    cursor: pointer;
    border: px solid #0066CC;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  #box1 p {
    width: 10.0vw;
    height: 10.0vh;
    border-radius: 25%;
  }
  
  #box2 {
    position: absolute;
    top: -10.3vh;
    left: -10.98vw;
    cursor: pointer;
    border: px solid #0066CC;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  #box2 p {
    width: 10.0vw;
    height: 10.0vh;
    border-radius: 25%;
  }
  
  #box3 {
    position: absolute;
    top: -10.3vh;
    left: 0.98vw;
    cursor: pointer;
    border: px solid #0066CC;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  #box3 p {
    width: 10.0vw;
    height: 10.0vh;
    border-radius: 25%;
  }
  
  #box4 {
    position: absolute;
    top: -10.3vh;
    left: 20.98vw;
    cursor: pointer;
    border: px solid #0066CC;
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  #box4 p {
    width: 10.0vw;
    height: 10.0vh;
    border-radius: 25%;
  }
  
  .boxleft {
    position: absolute;
    top: 25.3vh;
    left: -25.98vw;
    width: 14.0vw;
    height: 40.0vh;
    cursor: pointer;
    border: 2px solid black;
  }
  
  .boxright {
    position: absolute;
    top: 25.3vh;
    left: 25.98vw;
    width: 14.0vw;
    height: 40.0vh;
    cursor: pointer;
    border: 2px solid black;
  }
  
  #container {
    white-space: nowrap;
    border: px solid #CC0000;
  }
  
  .containerr {
    border: px solid #FF3399;
  }
  
  .pic {
    background-size: 100% 100%;
  }
  
  .container2 {
    width: 50.1vw;
    position: fixed;
    top: 10.5vh;
    left: 30.5vw;
  }
  
  .box p {
    font-size: calc(2vw + 10px);
  }
  
  .boxleft p {
    font-size: calc(4vw);
    height: 4vh;
    background: royalblue;
    margin: 0;
    color: white;
  }
  
  .boxright p {
    font-size: calc(4vw);
    height: 4vh;
    background: royalblue;
    margin: 0;
    color: white;
  }
  
  .hidden {
    visibility: hidden;
  }
  
  p {
    font: "Courier New", Courier, monospace;
    font-size: 5vw;
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 2px 8px 6px rgba(0, 0, 0, 0.2), 0px -5px 35px rgba(255, 255, 255, 0.3);
    color: #005ce6;
    text-align: center;
  }
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="container2">
    <div class="containerr">
      <div class="pic" id="content">
        <div id="container">
          <div class="box" id="box1" draggable="true" ondragstart="drag(event)">
            <p name="values" id="name1" class="hidden"></p>
          </div>
          <div class="box" id="box2" draggable="true" ondragstart="drag(event)">
            <p name="values" id="name2" class="hidden"></p>
          </div>
          <div class="box" id="box3" draggable="true" ondragstart="drag(event)">
            <p name="values" id="name3" class="hidden"></p>
          </div>
          <div class="box" id="box4" draggable="true" ondragstart="drag(event)">
            <p name="values" id="name4" class="hidden"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="boxleft" ondrop="drop(event)" ondragover="allowDrop(event)" id="2"></div>
    <div class="boxright" ondrop="drop(event)" ondragover="allowDrop(event)" id="3"></div>
  

  回复于 2023-12-03T15:00:19+08:00