Javascript 如何将对象中的数字与dom中的文本进行比较？

我有一个函数，它从1-6中选择一个随机数，然后将它附加到DOM中。我试图将该数字与DOM中当前div中的数字进行比较。所以我将这些数字存储在一个名为cards的var中。当我输入console.log（）变量时，它返回一个数组。我将该数组转换为字符串，然后检索文本。比较数字的最佳方法是什么？我应该做一个for循环，如果这些数字中的任何一个与随机抽取的数字匹配，我应该采取一些措施吗？有人能给我举个例子吗？我的代码如下

 $(function(){
   function dice1(){
       var randomNumber =  Math.floor(Math.random() * 6) + 1;
       $('#instructions').text(randomNumber);
       return randomNumber;
   }
    function dice2(){
        var randomNumber =  Math.floor(Math.random() * 6) + 1;
        $('#instructions2').text(randomNumber);
        return randomNumber;

    }
    $('#dice1').click(function() {
        dice1();
        var cards = $('#cards div');
        var single = cards.toString();

        console.log(cards.text());
        if ($('#instructions').text() == cards.text()) {
            console.log('match');
        }

    });

    $('#dice2').click(function(){
        dice2();
    });


 });
  <section id="container">
    <div id="cards">
        <div id="1">1</div>
        <div id="2">2</div>
        <div id="3">3</div>
        <div id="4">4</div>
        <div id="5">5</div>
        <div id="6">6</div>
        <div id="7">7</div>
        <div id="8">8</div>
        <div id="9">9</div>
    </div>

    <section>
        <button id="dice1">Roll dice1</button>
        <button id="dice2">Roll dice2</button>
        <div id="instructions"></div>
        <div id="instructions2"></div>
    </section>

</section>

$（函数（）{
函数1（）{
var randomNumber=Math.floor（Math.random（）*6）+1；
$（“#说明”）.text（随机数）；
返回随机数；
}
函数2（）{
var randomNumber=Math.floor（Math.random（）*6）+1；
$（'#说明2'）。文本（随机数）；
返回随机数；
}
$（'#dice1'）。单击（函数（）{
dice1（）；
var cards=$（“#cards div”）；
var single=cards.toString（）；
console.log（cards.text（））；
if（$（“#说明”）.text（）==cards.text（））{
console.log（'match'）；
}
});
$（'#dice2'）。单击（函数（）{
dice2（）；
});
});
1.
2.
3.
4.
5.
6.
7.
8.
9
掷骰子1
掷骰子2

为什么不将卡直接存储在如下阵列中：

var cards = [1,2,3,4,5,6,7,8,9];

var number = parseInt($("#instructions").text());

if(cards.indexOf(number) >= 0)
    console.log("Number found");
else
    console.log("Number not found");

然后进行如下比较：

var cards = [1,2,3,4,5,6,7,8,9];

var number = parseInt($("#instructions").text());

if(cards.indexOf(number) >= 0)
    console.log("Number found");
else
    console.log("Number not found");

如果你真的想按自己的方式做，你可以这样做：

$(".cards div").each(function(){
    var number = parseInt($("#instructions").text());
    var card = parseInt($(this).text());
    if(card == number)
            console.log("Number found");

});

---

您确实可以使用for循环来实现：

$('#dice1').click(function() {
    var random_number = dice1();
    var cards = $('#cards div');

    for(var i = 0; i < cards.length; i++ ) {
       if($(this).html() == random_number) {
           alert('Do something!');
       }
    }

    console.log(cards.text());
    if ($('#instructions').text() == cards.text()) {
        console.log('match');
    }

});

但是请记住，ID属性不能以数字开头，因此我将在此处创建自己的属性：

<div id="cards">
    <div data-number="1">1</div>
    <div data-number="2">2</div>
    <div data-number="3">3</div>
    <div data-number="4">4</div>
    <div data-number="5">5</div>
    <div data-number="6">6</div>
    <div data-number="7">7</div>
    <div data-number="8">8</div>
    <div data-number="9">9</div>
</div>

---

您可以这样做：

var cards = [1,2,3,4,5,6,7,8,9];

var number = parseInt($("#instructions").text());

if(cards.indexOf(number) >= 0)
    console.log("Number found");
else
    console.log("Number not found");

新JS:

 $(function () {
     function dice1() {
         var randomNumber = Math.floor(Math.random() * 6) + 1;
         $('#instructions').text(randomNumber);
         return randomNumber;
     }

     function dice2() {
         var randomNumber = Math.floor(Math.random() * 6) + 1;
         $('#instructions2').text(randomNumber);
         return randomNumber;

     }
     $('#dice1').click(function () {
         var num1 = dice1();

         $('#cards div').each(function (index,item) {
             if ($(item).text() == num1) {
                 $(item).css("color", "red");
             }
         });


         $('#dice2').click(function () {
             dice2();
         });


     });
 });

---

我刚刚学会了一种动态解决问题的方法，我个人认为这更容易遵循

 <div data-hook="cards" id="cards">
        <div data-value="1" id="1">1</div>
        <div data-value="2" id="2">2</div>
        <div data-value="3" id="3">3</div>
        <div data-value="4" id="4">4</div>
        <div data-value="5" id="5">5</div>
        <div data-value="6" id="6">6</div>
        <div data-value="7" id="7">7</div>
        <div data-value="8" id="8">8</div>
        <div data-value="9" id="9">9</div>
    </div>

 $(function(){
   function dice1(){
       var randomNumber =  Math.floor(Math.random() * 6) + 1;
       $('#instructions').text(randomNumber);
       return randomNumber;
   }

    $('#dice1').click(function() {
        dice1();

        $('[data-hook=cards] [data-value]').find('#instructions'); //'data-hook=cards] [data-value]' selects the element by attr'
        var rolledNum = $('#instructions').text(),
                selector = '[data-value=' + rolledNum + ']',
                $card = $('[data-hook=cards]').find(selector);
        //Instead of using an $.each or for loop to compare two numbers I am taking the random number and finding it on the div and then modifying the div.
        console.log($card);
        $card.css({'opacity':.2});

    });        
 });

1.
2.
3.
4.
5.
6.
7.
8.
9
$（函数（）{
函数1（）{
var randomNumber=Math.floor（Math.random（）*6）+1；
$（“#说明”）.text（随机数）；
返回随机数；
}
$（'#dice1'）。单击（函数（）{
dice1（）；
$（“[data hook=cards][data value]”）。查找（“#说明”）；//“data-hook=cards][data value]”按属性选择元素
var rolledNum=$（“#指令”）.text（），
选择器='[数据值='+rolledNum+']'，
$card=$（'[datahook=cards]'）。查找（选择器）；
//我没有使用$.each或for循环来比较两个数字，而是使用随机数并在div中找到它，然后修改div。
控制台日志（$卡）；
$card.css（{'opacity'：.2}）；
});        
});