将数字与卡号进行比较答案

【问题标题】：Compare numbers to cards numbers将数字与卡号进行比较
【发布时间】：2019-02-20 17:37:16
【问题描述】：

我正在编写一个简单的 html 游戏。我想将红牌的数字与随机数字进行比较。如果任意一个随机数等于红牌的数字，则在用户翻转红牌时动态添加“BINGO”文本到红方的back 类中。就像宾果游戏一样，用户在翻红牌之前不知道哪些牌有“BINGO”字符串。我无法将数组编号与front 类编号进行比较，并将“BINGO”字符串动态添加到红牌中。有人可以帮忙吗？

JSFIDDLE 在这里：http://jsfiddle.net/7emqLztp/28/

$(".treasure").flip();

var howMany = 3;
        var min = 2;
        var max = 5;
        var a = new Array();
        while (a.length < howMany) {
            var n = Math.floor(Math.random() * (max - min) + 0.5) + min;
            if (a.indexOf(n) == -1) {
                a.push(n);
            }
        }

$("#button").click(function () {
    $('.num').text(a)
  });

.table 
{
   display: table;
   border-collapse:separate;
   /*border-spacing: 5px;*/
   /*border: 1px solid #fff;*/
}

.table-row 
{
  display: table-row;
}

.table-cell 
{
  text-align: center;
  display: table-cell;
  border: 0.5px solid #231f20;
  vertical-align: middle;
  width: 50px;
  height: 50px;
}
        
.treasure 
{
  background-color: red;
}

<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
</head>

<div class="table">
        <div class="table-row">
            <div class="table-cell">
                1
            </div>
            <div class="table-cell treasure">
              <div class="front">2</div>
              <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">3</div>
                <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">4</div>
                <div class="back"></div>
            </div>
            <div class="table-cell treasure">
                <div class="front">5</div>
                <div class="back"></div>
            </div>
            <div class="table-cell">
                6
            </div>
        </div>
</div>

<button id="button">Random Num</button>
<div class="num"></div>

【问题讨论】：

您在实施或想法方面有问题吗？
@Papi 嗨，我的问题是如何实现将 div 数字与随机数组数字进行比较，并且在比较数字之后，如果 div 数字等于数组数字，我想将“BINGO”添加到红牌中。

标签： javascript jquery arrays compare flip

【解决方案1】：

请查看此更新后的代码。我很确定这是可行的。

$(".treasure").flip().find(".back").text("-")
var cardCount = 3;
var bingoCards = [];

do {
  let n = Math.floor(Math.random() * 4) + 2;
  if (bingoCards.indexOf(n) === -1) {
    bingoCards.push(n)
    let item = $(".treasure")[n-2];
    $(item).find(".back").text("BINGO")
  }
} while (bingoCards.length < cardCount)


$("#button").click(function() {
  $("#result").html(`The numbers are: <b>${bingoCards.join(", ")}</b>`)
});

.table {
  display: table;
  border-collapse: separate;
  /*border-spacing: 5px;*/
  /*border: 1px solid #fff;*/
}

.table-row {
  display: table-row;
}

.table-cell {
  text-align: center;
  display: table-cell;
  border: 0.5px solid #231f20;
  vertical-align: middle;
  width: 50px;
  height: 50px;
}

.treasure {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>

<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>


<div class="table">
  <div class="table-row">
    <div class="table-cell">1</div>
    <div class="table-cell treasure">
      <div class="front">2</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">3</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">4</div><div class="back"></div>
    </div>
    <div class="table-cell treasure">
      <div class="front">5</div><div class="back"></div>
    </div>
    <div class="table-cell">6</div>
  </div>
</div>

<button id="button">Random Numbers</button>
<div id="result"></div>

【讨论】：

您好，感谢您的帮助！但是我发现了一些问题。为什么随机数显示“2,3,5”，但是当我翻牌时，“2,3,4”上显示“BINGO”字样？与随机数不匹配
我已经更新了代码，让它更漂亮一些。很高兴能帮到你。