当单击不同数组中的另一个单独项目同时从第一个数组中删除该项目时，从一个数组中随机显示项目？

Posted 2023-05-09

【中文标题】当单击不同数组中的另一个单独项目同时从第一个数组中删除该项目时，从一个数组中随机显示项目？

【英文标题】：Show item at random from one array when another separate item in a different array is clicked while also removing that item from the first array?

【发布时间】：2019-05-17 09:18:08

【问题描述】：

我正在开发我的第一个真正的项目，一个“刽子手”风格的游戏。我正在尝试执行此操作，但不确定我哪里出错了：如果单击了“错误的字母”，则随机显示一个“身体部位”并从数组中删除，这样它就不会重复。

let wrongAmount = 0
let wrongLettersArray = ["#alphabetLetterA", "#alphabetLetterB", "#alphabetLetterC", "#alphabetLetterD", "#alphabetLetterE", "#alphabetLetterF", "#alphabetLetterG", "#alphabetLetterH", "#alphabetLetterJ", "#alphabetLetterK", "#alphabetLetterM", "#alphabetLetterN", "#alphabetLetterQ", "#alphabetLetterR", "#alphabetLetterU", "#alphabetLetterV", "#alphabetLetterW", "#alphabetLetterX", "#alphabetLetterY", "#alphabetLetterZ"]
let bodyPartsArray = ["#losingTorso", "#losingRightArm", "#losingLeftArm", "#losingRightLeg", "#losingLeftLeg"]
let correctLettersArray = ["#correctLetterP", "#correctLetterI", "#correctLetterS", "#correctLetterT", "#correctLetterO", "#correctLetterL"]

function wrongGuess() 
    $(wrongLettersArray).on('click', function () 
        $(bodyPartsArray).show()
        wrongGuess()
    )


//if a wrong letter is clicked show one of the body parts at random
//remove from list so it cannot repeat
//add 1 to the wrong amount

【参考方案1】：

如果我的理解正确，您想从 body parts 数组中选择一个项目并将其删除，这样就不能再次选择它了？你可以使用splice()。

const ar = [0, 1, 2, 3, 4, 5, 6]
const idx = Math.floor(Math.random() * ar.length)
const item = ar.splice(idx, 1)

console.log(item, ar)

在上面，我们有一个数组（在这种情况下就是你的身体部位数组）。然后我们选择一个索引，该索引位于该数组的长度范围内。然后，splice 从数组中删除该索引处的项目并将其返回。

【讨论】：

谢谢你，这有很大的不同！我会对该方法进行更多研究，再次感谢！

【参考方案2】：

您的代码的第一个问题是它永远不会被执行。你需要设置你的代码来运行，但是因为你从不在函数本身之外执行函数，所以它永远不会设置观察者。

你可以这样做：

$(document).ready(function () 
  wrongGuess();
);

很遗憾，您编写的代码没有正确执行您需要它执行的操作，因此我为您提供了如下解决方案。

首先，我设置了一些基本的 html 来说明坏信和好信：

<h2>wrong</h2>
<button id="a">A</button>
<button id="b">B</button>

<h2>correct</h2>
<button id="p">P</button>
<button id="s">S</button>

<hr>

<h1 id="torso">torso</h1>
<h1 id="right-arm">right arm</h1>

<hr>

wrong count: <span id="wrong">0</span>

然后，我设置了一个函数来隐藏所有的身体部位：

function hideAllBodyParts() 
  var bodyPartsSelector = bodyPartsArray.join(', ');

  $(bodyPartsSelector).hide();

您不能将数组作为选择器传递给 jQuery，它必须是字符串，即 '#a, #b' 而不是 ['#a', '#b']。

然后你的主要功能是一次显示一个身体部位并增加错误的计数：

function watchForWrongGuesses() 
  // Your selector needs to be a string, e.g. '#a, #b' not an array ['#a', '#b']
  var wrongLettersSelectors = wrongLettersArray.join(', ');

    $(wrongLettersSelectors).on('click', function () 
      // Choose one body part and show it
      var bodyPart = bodyPartsArray.pop();
      $(bodyPart).show();

      // Increment wrong count
      wrongAmount++;
      $('#wrong').text(wrongAmount);
    );

然后，最后但最重要的部分是在文档加载时将其链接起来：

$(document).ready(function () 
  hideAllBodyParts();
  watchForWrongGuesses();
);

此方法最初隐藏所有正文部分，然后设置按钮点击的观察者。

解决方案：https://codepen.io/tinacious/pen/xmOgJj

【讨论】：

哇！我非常感谢你，这很有意义，你是一位伟大的老师！只有一个问题......当你说，“你需要设置你的代码来运行，但是因为你从不在函数本身之外执行函数，所以它永远不会设置观察者。”这就是 $(document).ready(function () 所修复的吗？

是的@cameron-bret，这就是我的意思。您可以在jQuery documentation for document.ready 中阅读更多相关信息。如果您认为我的回答对您有帮助，请随时接受它作为最佳答案。