使用javascript隐藏特定值之后的元素_Javascript_Html_Css_Arrays_Dom

使用javascript隐藏特定值之后的元素

javascript html css arrays dom

使用javascript隐藏特定值之后的元素,javascript,html,css,arrays,dom,Javascript,Html,Css,Arrays,Dom,我对此进行了广泛的搜索，似乎找不到答案，我不知道这是因为不应该这样做，还是因为我做得不对。我正在学习JavaScript，并试图为我的女儿构建一个计数游戏。页面上显示的divs中有21匹马，我有3个框，其中有3个框可以选择正确的数字。在我的JavaScript中，我能够生成一个随机数，并希望将其用作基准。我尝试遍历nodelist数组并添加一个类，以不显示任何高于所选数字的内容。我还使用了console.log来记录我能想到的一切，以查看我的错误所在。我认为我的问题是我正在努力将这些元素直接与评

我对此进行了广泛的搜索，似乎找不到答案，我不知道这是因为不应该这样做，还是因为我做得不对。我正在学习JavaScript，并试图为我的女儿构建一个计数游戏。页面上显示的

div

s中有21匹马，我有3个框，其中有3个框可以选择正确的数字。在我的JavaScript中，我能够生成一个随机数，并希望将其用作基准。我尝试遍历nodelist数组并添加一个类，以不显示任何高于所选数字的内容。我还使用了console.log来记录我能想到的一切，以查看我的错误所在。我认为我的问题是我正在努力将这些元素直接与评估联系起来。到目前为止，我已经尝试了几种不同的选择。我不知道我正在尝试的是JavaScript不可能实现，还是我忽略了解决方案。请，任何帮助都将不胜感激

这是html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Number Game</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/javascript" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    <link rel="stylesheet" type="text/javascript" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js">
    <link rel="stylesheet" href="assets/main.css">
</head>
<body>


<div class="container">
    <div class="square">
        <p class="guess">
            
        </p>
    </div>
    <div class="square">
        <p class="guess">
            
        </p>
    </div>
    <div class="square">
        <p class="guess">
            
        </p>
    </div>

</div>

<div class="container horses">
    <div class="row">
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
        <div class="col-xs-1">
            <img class="horse" src="assets/horse.png">
        </div>
    </div>
</div>


  

<script type="text/javascript" src="assets/numbers.js"></script>  
</body>
</html>


数字游戏

如果我理解您的问题是正确的，那么您的目标是显示随机整数中的马数，并且游戏是计算马的数量，然后单击正确的数字进行猜测

一个好的选择是添加一个css类来隐藏大量的马。使用

horses[i].classList.add（“hidden”）

（并删除所有其他类上的类，以便能够在猜测后重新初始化）。我重新安排了代码，不使用全局变量，而是使用更具描述性的函数名。但关键的变化在你的for循环中

还要注意新的cssclass：

    .hidden {
        display: none;
    }

希望能有帮助


函数init（）{
var numberOfHorses=getRandomInt（22）；
hideOrShowHorses（马的数量）；
设置猜测替代者（马的数量）
}
函数hideOrShowHorses（numberOfHorses）{
console.log（“将显示”，numberOfHorses，“horses”）
var horses=document.queryselectoral（“.horse”）
for（var i=0；i


正文{
背景：url（“cartonfarm.jpg”）无重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
溢出：隐藏；
z指数：0；
}
.隐藏{
显示：无；
}
.广场p{
保证金：0；
背景：黄色；
位置：绝对位置；
最高：50%；
左：50%；
保证金权利：-50%；
转换：转换（-50%，-50%）
}
.广场{
宽度：30%；
边框：红色虚线4px；
背景：白色；
垫底：30%；
颜色：红色；
浮动：左；
位置：相对位置；
利润率：1.66%；
边界半径：25%；
过渡：背景0.6s；
-webkit转换：背景0.6s；
-moz转换：背景0.6s；
显示：内联块；
}
@介质（最小宽度：768px）{
.广场{
宽度：30%；
}
}
.测试{
显示：块；
}
.隐藏{
显示：无；
}
.马{
宽度：50px；
高度：50px；
边际：0.8px；
}
@介质（最小宽度：576px）{
.马{
宽度：60px；
高度：60px；
}
}
@介质（最小宽度：768px）{
.马{
宽度：75px；
高度：75px；
利润率：0.15px；
}
}
@介质（最小宽度：1000px）{
.马{
宽度：100px；
高度：100px；
利润率：0.20px；
}
}
.马{
垫面：20%；
}
.集装箱{
文本对齐：居中；
填充顶部：20px；
}

数字游戏