javascript - 从数组中随机选择的项目中删除重复项在 javascript 中不起作用

标签 javascript html

下面的代码有四个框，我从数组 items. 中随机选择了 3 个项目。

我已将随机选择的元素放入 4 个盒子中。

类box002可以拖放到显示的三个框中对应的数字。然后框中的 blue digit 消失了。

我有一个代码可以从随机选择的项目中删除重复项，

item = array2.splice(randomIndex, 1);

但是当我将它插入到我的代码中时，rvalue() 函数不会选择随机值

如何解决？并使随机选择的项目不重复？

var items = [{
    label: '1',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10',
    url: 'https://via.placeholder.com/75x75?text=10'
  }
];

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

var backimgcount = 1;
var len = array2.length;

var item;
var displaycounter = 0;




var images = ['https://picsum.photos/200/300', 'https://picsum.photos/g/200/300'];
var index = 0;

function buildImage() {
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}

function changeImage() {
  index++;
  if (index >= images.length) index = 0;
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}


function rvalue() {


  elements = document.getElementsByClassName("box");

  elements = document.getElementsByClassName("box");

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "#ff66ff";
    elements[i].style.border = "2px solid  #e3a89e ";

  }


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

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

    item = array2[randomIndex];
    //item = array2.splice(randomIndex, 1);
    
    ptags[index].style.visibility = "visible";
    ptags[index].textContent = item.label;
    boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; 
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;

  }

  var tlen = tempimages.length;


}


function displayAllImages() {
  if (tempimages.length == 0) {

    rvalue();
  }


  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }


  var arr = tempimages;
  arr = shuffle(arr);

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


};

$(function() {

  displayAllImages();

});

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 el = document.getElementById(data);


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



  if (x == y) {

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

    var pParagraph = ev.currentTarget.firstElementChild;
   
    pParagraph.style.visibility = "hidden";

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


    if (tempimages.length == 0) {
      rvalue();
      changeImage();
    }
    displayAllImages();
  } else {
    alert("WRONG PLACED");
  }

}
body {
  overflow: hidden;
}

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;

}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size:contain;
}

.box002 {
  position: absolute;
  top: 27.3vh;
  left: 72.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <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>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" border="rounded" />
</div>

最佳答案

您删除重复项的代码正在运行。

问题是您覆盖了 item 变量。

item = array2[randomIndex];
item = array2.splice(randomIndex, 1);

在上面的第一行中，item 是您的 array2 数组中随机选择的元素。第二行执行后，item 变为包含该元素的数组。

来自 MDN 中的 Array.prototype.splice() :

Return value
An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

例如(注意括号):

item = array2[randomIndex];
console.log(item); // { "label": "2", "url": ... }
item = array2.splice(randomIndex, 1);
console.log(item); // [ { "label": "2", "url": ... } ]

代码的其余部分需要一个对象，而不是数组，因此它失败了。由于您不需要对返回的数组做任何事情，您可以简单地切换到:

item = array2[randomIndex];
array2.splice(randomIndex, 1);

然后，因为您已经在随机选择过程中删除了元素，所以当用户将 .box002 放入相应的框中时不要这样做。这意味着，删除 drop() 函数中的以下行。

array2.splice(arrayvalue, 1);


var items = [{
    label: '1',
    url: 'https://via.placeholder.com/75x75?text=1'
  },
  {
    label: '2',
    url: 'https://via.placeholder.com/75x75?text=2'
  },
  {
    label: '3',
    url: 'https://via.placeholder.com/75x75?text=3'
  },
  {
    label: '4',
    url: 'https://via.placeholder.com/75x75?text=4'
  },
  {
    label: '5',
    url: 'https://via.placeholder.com/75x75?text=5'
  },
  {
    label: '6',
    url: 'https://via.placeholder.com/75x75?text=6'
  },
  {
    label: '7',
    url: 'https://via.placeholder.com/75x75?text=7'
  },
  {
    label: '8',
    url: 'https://via.placeholder.com/75x75?text=8'
  },
  {
    label: '9',
    url: 'https://via.placeholder.com/75x75?text=9'
  },
  {
    label: '10',
    url: 'https://via.placeholder.com/75x75?text=10'
  }
];

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

var backimgcount = 1;
var len = array2.length;

var item;
var displaycounter = 0;




var images = ['https://picsum.photos/200/300', 'https://picsum.photos/g/200/300'];
var index = 0;

function buildImage() {
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}

function changeImage() {
  index++;
  if (index >= images.length) index = 0;
  document.getElementById('content').style.backgroundImage = 'url(images/' + images[index] + ')';
}


function rvalue() {


  elements = document.getElementsByClassName("box");

  elements = document.getElementsByClassName("box");

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = "#ff66ff";
    elements[i].style.border = "2px solid  #e3a89e ";

  }


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

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

    item = array2[randomIndex];
    array2.splice(randomIndex, 1);
    
    ptags[index].style.visibility = "visible";
    ptags[index].textContent = item.label;
    boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; 
    tempimages.push({
      data: item,
      index: randomIndex
    });

    ptags[index].dataset.itemIndex = randomIndex;

  }

  var tlen = tempimages.length;


}


function displayAllImages() {
  if (tempimages.length == 0) {

    rvalue();
  }


  function shuffle(array) {
    var currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  }


  var arr = tempimages;
  arr = shuffle(arr);

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


};

$(function() {

  displayAllImages();

});

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 el = document.getElementById(data);


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



  if (x == y) {

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

    var pParagraph = ev.currentTarget.firstElementChild;
   
    pParagraph.style.visibility = "hidden";

    item = this.item;
    var arrayvalue = item.dataindex;

    if (tempimages.length == 0) {
      rvalue();
      changeImage();
    }
    displayAllImages();
  } else {
    alert("WRONG PLACED");
  }

}
body {
  overflow: hidden;
}

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;

}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size:contain;
}

.box002 {
  position: absolute;
  top: 27.3vh;
  left: 72.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <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>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" border="rounded" />
</div>

关于javascript - 从数组中随机选择的项目中删除重复项在 javascript 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53029442/

上一篇：c# - 使用 Html helper HiddenFor C# MVC 将模型添加到模型中

下一篇：html - Bootstrap 4 全高卡带独立滚动列

相关文章：

javascript - 在 express 中使用 sendfile 作为静态 html 文件路由的一部分时，会下载关联的 .js 和 .css 文件，但不会应用。

javascript - 自定义按钮移除单击时的焦点，但不移除 Enter 按键的焦点

javascript - 如何在 div 上添加 jQuery 框

javascript - 如何检查我的jsp文件是否转换为UTF-8

javascript - 显示图像数组中的图像 - Javascript

javascript - 从 Javascript 设置一个 PHP 变量并从 &lt;style&gt; 读入

javascript - 仅在预加载器结束后加载 jquery 事件

javascript - 为什么在express js中间件中调用函数表达式会被提升？

javascript - 如何将 hover css 与圆形图像一起使用？

html - Ajax 覆盖 div 超出父级

©2024 IT工具网  联系我们