如何从数组上删除索引

时间：2018-12-07 04:28:39

标签： javascript html

我有四个装有鸟类和鱼类图像的盒子。我有一个.boxleft和.boxright，可以将四个框分别拖放到.boxleft或.boxright。

我有一个数组tempimages[]，该数组在执行函数selected items时得到rvalue()的值

我的问题是， 我想在每次成功删除操作时从数组tempimages []中删除相应的索引（及其元素）。

如何实现？

var array2 = [];

/** Update items with TYPE */
var items = [{
    label: 'pigeon',
    type: 'avian',
    url: 'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
  },
  {
    label: 'goldfish',
    type: 'aquatic',
    url: 'https://i.ibb.co/MRCV8Sn/fgoldfish.png'
  },
  {
    label: 'parrot',
    type: 'avian',
    url: 'https://i.ibb.co/TwPtqx5/bparrot.jpg'
  },
  {
    label: 'fshark',
    type: 'aquatic',
    url: 'https://i.ibb.co/xCpks04/fshark.png'
  },
];
var tempimages = [];
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 < 4; 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 + ')';
      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";
}
#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: 48.3vh;
  left: -25.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

.boxright {
  position: absolute;
  top: 48.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>

2 个答案:

答案 0 :(得分：1)

复制自attr从REF删除

var removeByAttr = function(arr, attr, value){
  var i = arr.length;
  while(i--){
    if( arr[i] 
      && arr[i].hasOwnProperty(attr) 
      && (arguments.length > 2 && arr[i][attr] === value ) ){ 
        arr.splice(i,1);

      }
   }
   return arr;
}

删除完成后，您可以删除元素。您需要通过放置的元素的标签找到index，然后通过索引attr将其从tempImages中删除。

 var index = items.findIndex(i => i.label.toLowerCase() === label)      
 removeByAttr(tempimages, 'index', index)


var array2 = [];

/** Update items with TYPE */
var items = [{
    label: 'pigeon',
    type: 'avian',
    url: 'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
  },
  {
    label: 'goldfish',
    type: 'aquatic',
    url: 'https://i.ibb.co/MRCV8Sn/fgoldfish.png'
  },
  {
    label: 'parrot',
    type: 'avian',
    url: 'https://i.ibb.co/TwPtqx5/bparrot.jpg'
  },
  {
    label: 'fshark',
    type: 'aquatic',
    url: 'https://i.ibb.co/xCpks04/fshark.png'
  },
];
var tempimages = [];
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 < 4; 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 + ')';
      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 index = items.findIndex(i => i.label.toLowerCase() === label)
  removeByAttr(tempimages, 'index', index)
  console.log(tempimages)
}
#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: 48.3vh;
  left: -25.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

.boxright {
  position: absolute;
  top: 48.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>

答案 1 :(得分：1)

由于您有名称，因此也可以按标签（如果没有按索引）进行过滤。

使用过滤功能-

基于标签过滤数组 
tempimages = tempimages.filter((e) => e.data.label!=label)


var array2 = [];

/** Update items with TYPE */
var items = [{
    label: 'pigeon',
    type: 'avian',
    url: 'https://i.ibb.co/MgBS9P7/bpigeon.jpg'
  },
  {
    label: 'goldfish',
    type: 'aquatic',
    url: 'https://i.ibb.co/MRCV8Sn/fgoldfish.png'
  },
  {
    label: 'parrot',
    type: 'avian',
    url: 'https://i.ibb.co/TwPtqx5/bparrot.jpg'
  },
  {
    label: 'fshark',
    type: 'aquatic',
    url: 'https://i.ibb.co/xCpks04/fshark.png'
  },
];
var tempimages = [];
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 < 4; 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 + ')';
      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());
console.log(tempimages=tempimages.filter((e) => e.data.label!=label));

  // 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";
}
#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: 48.3vh;
  left: -25.98vw;
  width: 14.0vw;
  height: 40.0vh;
  cursor: pointer;
  border: 2px solid black;
}

.boxright {
  position: absolute;
  top: 48.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>

相关问题
最新问题