如何在数组中找到不匹配的数字？

Question

这是 Reactjs 中的数字记忆游戏

---

第一个数字随机出现。例如：123。

我将输入第二个数字：123。

没错。

---

所以如果我输入错误，例如 124，那么 4 应该被划掉。

输出应该是这样的：

<div>
  <span>1</span>
  <span>2</span>
  <span className="wrong">4</span>
</div>

更多示例：

随机数：4573

输入：4674

输出：4674

---

随机数：4573

输入：4674761

输出：4674761

---

随机数：123

输入：123456

输出：123456

Answer 1

根据您的示例，我认为这些数字也应该在正确的位置。

由于您没有提供用户输入短于随机数的示例，因此我假设在这种情况下，此类选项不存在，或者您正在以其他方式处理它。

现在我的假设已经定义，您可以通过将用户输入数字转换为字符串并逐一比较符号来迭代用户输入数字来做到这一点。 您需要检查位置 i 处的符号在两个数字中是否相等（input[i] === random_num[i]），只是不要忘记在迭代输入时，您可以将 i 增加到超过 random_num 的长度，您应该检查这些情况并将每个 input[i] 标记为错误，其中 i > random_num.length

Answer 2

这是我的尝试

class NumberMemoryGame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', answer: '123456'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
        <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Guess:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <div>
          {[...this.state.value].map((char, i) => (
          <span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
           {char}
          </span>))}
        </div>
      </div>
    );
  }
}

你可以找到 JS Fiddle here。

Answer 3

假设您将两个条目作为数组传递给组件，假设 array_1 是原始条目，array_2 是第二个条目，那么您要做的就是

function App({ array_1, array_2 }) {
  return (
    <div>
      {array_2.map((val, i) => {
        if (val === array_1[i]) {
          return <span>{val}</span>;
        }
        return <span className="wrong">{val}</span>;
      })}
    </div>
  );
}

Answer 4

注意：原版 JavaScript 解决方案。

我猜你可以使用这样的东西：

• 突出显示所有与字符串不匹配的元素。

const input = document.getElementById("data");
const results = document.getElementById("results");

function check() {
  results.innerHTML = "";
  let message = ``;
  let random = String(getRandom()).split("");
  if (random === input.value) {
    console.log("Win");
  } else {
    if (random.length >= input.value) {
      random.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== input.value[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    } else {
      let inputValue = input.value.split("");
      inputValue.forEach((r, i) => {
        let span = document.createElement("span");
        if (r !== random[i])
          span.classList.add("wrong");
        span.innerText = input.value[i];
        results.append(span);
      });
    }
  }
}

function getRandom() {
  return Math.floor(Math.random() * 1000);
}

.wrong {
  background: red;
  color: #fff;
}

<input type="number" id="data">
<button onClick="check()">SUBMIT</button>

<div id="results"></div>

Working Fiddle