将值重新加载到数组中的时间比JavaScript中的最后一位早

时间：2018-09-25 02:07:17

标签： javascript jquery html

我有一个课程 box2 ，并且 box ，该框包含 array2 中随机选择的值 数组项

的重复项

当拖动的元素url与放置的元素标签匹配时，背景色消失。

我给了条件if tempimages==0，随机选择再次发生。也就是说，当drop位于最后一个元素时。

我的问题是，当跌落到达倒数第二个元素时，在 box 类中发生了元素的随机选择和重新填充

我希望这发生在最后一个盒子上。

如何实现和纠正它？

var items = [{
    label: '1:40',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2:20',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3:50',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4:45',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5:35',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6:10',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7:15',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8:10',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9:30',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10:40',
    url: 'https://via.placeholder.com/75x75?text=10'
  },
  {
    label: '11:20',
    url: 'https://via.placeholder.com/75x75?text=11'
  },
  {
    label: '12:50',
    url: 'https://via.placeholder.com/75x75?text=12'
  },
  {
    label: '01:45',
    url: 'https://via.placeholder.com/75x75?text=13'
  },
  {
    label: '02:25',
    url: 'https://via.placeholder.com/75x75?text=14'
  },
  {
    label: '03:40',
    url: 'https://via.placeholder.com/75x75?text=15'
  }
]

var tempimages = [];
var array2 = [];
array2 = items.slice();


var len = array2.length;
console.log(len);
var item;



function rvalue() {

  ptags = document.querySelectorAll('[name="values"]');

  for (var index = 0; index < 3; index++) {
    randomIndex = Math.floor(Math.random() * array2.length),

      item = array2[randomIndex];
    ptags[index].textContent = item.label;
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;
  }
  var tlen = tempimages.length;



}


function displayAllImages() {
  if (tempimages.length == 0) {
    rvalue();
    //return;

  }
  item = tempimages.shift();
  image = document.getElementById('slide');
  image.src = item.data.url;
  image.dataset.itemIndex = item.index;



};

$(function() {

  rvalue();
  displayAllImages();

});

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
  console.log(ev.srcElement);

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);
  //alert(data);
  //alert(el);

  var x = document.getElementById("slide").dataset.itemIndex;
  var y = ev.target.dataset.itemIndex;

  // alert("x=>" + x + " y=>" + y);

  if (x == y) {
    el.parentNode.removeChild;


    ev.currentTarget.style.backgroundColor = 'initial';

    var pParagraph = ev.currentTarget.firstElementChild;
    //ev.currentTarget.removeChild(pParagraph);

    item = this.item;
    var arrayvalue = item.dataindex;
    array2.splice(arrayvalue, 1);


    displayAllImages();

    alert("sucessfull");
    if (tempimages.length == 0) {
      alert("NO more images");
      rvalue();

    }

  } else {
    alert("WRONG PLACE");
  }

}
.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  background-color: #66cc99;
  vertical-align: middle;
}

.box2 {
  float: left;
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 3%;
  padding-top: 2%;
  background-color: #ffff00 2px;
  border: px solid #000066;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">

  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values"></p>
  </div>
</div>


<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded" />
</div>

1 个答案:

答案 0 :(得分：3)

这是因为在检查代码长度之前， tempimages.shift（）; 删除了 displayAllImages(); 中的第一个元素。

在 displayAllImages(); 之后移动 if(tempimages.length == 0) {...} 即可正常工作。

if (tempimages.length == 0) {
  alert("NO more images");
  rvalue();
}
displayAllImages();


var items = [{
    label: '1:40',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2:20',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3:50',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4:45',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5:35',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6:10',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7:15',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8:10',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9:30',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10:40',
    url: 'https://via.placeholder.com/75x75?text=10'
  },
  {
    label: '11:20',
    url: 'https://via.placeholder.com/75x75?text=11'
  },
  {
    label: '12:50',
    url: 'https://via.placeholder.com/75x75?text=12'
  },
  {
    label: '01:45',
    url: 'https://via.placeholder.com/75x75?text=13'
  },
  {
    label: '02:25',
    url: 'https://via.placeholder.com/75x75?text=14'
  },
  {
    label: '03:40',
    url: 'https://via.placeholder.com/75x75?text=15'
  }
]

var tempimages = [];
var array2 = [];
array2 = items.slice();


var len = array2.length;
console.log(len);
var item;



function rvalue() {
    //reset background color of box div`s
    elements = document.getElementsByClassName("box");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="#66cc99";
    }
  
  ptags = document.querySelectorAll('[name="values"]');
  for (var index = 0; index < 3; index++) {
    randomIndex = Math.floor(Math.random() * array2.length),

      item = array2[randomIndex];
    ptags[index].textContent = item.label;
    //alert(ptags[index]);
    ptags[index].style.visibility = "visible";
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;
  }
  var tlen = tempimages.length;



}


function displayAllImages() {
//console.log(tempimages.length)
  if (tempimages.length == 0) {
    rvalue();
    //return;

  }
  item = tempimages.shift();
  image = document.getElementById('slide');
  image.src = item.data.url;
  image.dataset.itemIndex = item.index;



};

$(function() {

  rvalue();
  displayAllImages();

});

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

  ev.preventDefault();
 // console.log(ev.srcElement);

  var data = ev.dataTransfer.getData("Text");
  var el = document.getElementById(data);
  //alert(data);
  //alert(el);

  var x = document.getElementById("slide").dataset.itemIndex;
  var y = ev.target.dataset.itemIndex;

  // alert("x=>" + x + " y=>" + y);

  if (x == y) {


    ev.currentTarget.style.backgroundColor = 'initial';

    var pParagraph = ev.currentTarget.firstElementChild;
    //ev.currentTarget.removeChild(pParagraph);
pParagraph.style.visibility = "hidden";
    item = this.item;
    var arrayvalue = item.dataindex;
    array2.splice(arrayvalue, 1);




    alert("sucessfull");
    if (tempimages.length == 0) {
      alert("NO more images");
      rvalue();

    }
        displayAllImages();

  } else {
    alert("WRONG PLACE");
  }

}
.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  background-color: #66cc99;
  vertical-align: middle;
}

.box2 {
  float: left;
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 3%;
  padding-top: 2%;
  background-color: #ffff00 2px;
  border: px solid #000066;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">

  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
    <p name="values"></p>
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
    <p name="values"></p>
  </div>
</div>


<div class="box2" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" style="width:30px; height:30px; border-radius: 50%;" border="rounded" />
</div>

更新： 代码已更新，可以重置盒子值。

相关问题
最新问题