使用javascript隐藏某个值后的元素答案

【问题标题】：hide elements after a certain value with javascript使用javascript隐藏某个值后的元素
【发布时间】：2020-12-14 20:59:39
【问题描述】：

我已经对此进行了相当广泛的搜索，但似乎找不到答案，我不知道这是因为它不应该这样做还是我以错误的方式这样做。我只是在学习 JavaScript 并尝试为我的女儿构建一个计数游戏。页面上显示divs 中有 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>

这里是javascript：

    var horses = document.querySelectorAll(".horse")
    var pickedNumber = getRandomInt(22)
    var optionA = (pickedNumber + 2)
    var optionB = (pickedNumber - 1)
    var guess = document.querySelectorAll(".guess")



    init()

    function init(){
        getRandomInt();
        // numberOfHorses();
    }



    function numberOfHorses(){
        for (var i = 0; i < horses.length; i++){
            if(horses[i] < pickedNumber){
                console.log(horses[i])
            }
        }
    }



    function showHorses(num){
        if (num <= pickedNumber) {
            console.log(num)
        }
    }
        




    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    };

    body {
         background: url("cartoonFarm.jpg") no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow: hidden;
        z-index: 0;
    }

    .square p {
        margin: 0;
        background: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }


    .square {
        width: 30%;
        border: red dashed 4px;
        background: white;
        padding-bottom: 30%;
        color: red;
        float: left;
        position: relative;
        margin: 1.66%;
        border-radius: 25%;
        transition: background 0.6s;
        -webkit-transition: background 0.6s;
        -moz-transition: background 0.6s;
        display: inline-block;
    }

    @media(min-width: 768px) {
        .square {
            width:30%;
        }
    }

    .test {
        display: block;
    }

    .hide {
        display: none;
    }


    .horse {
        width: 50px;
        height: 50px;
        margin: 0 8px;

    }

    @media(min-width: 576px) {
        .horse {
            width:  60px;
            height: 60px;
        }
    }

    @media (min-width: 768px) {
        .horse {
            width:  75px;
            height: 75px;
            margin: 0 15px;
        }
    }

    @media (min-width: 1000px) {
        .horse {
            width:  100px;
            height: 100px;
            margin: 0 20px;
        }
    }

    .horses{
        padding-top: 20%;
    }

    .container {
        text-align: center;
        padding-top: 20px;
    }

    <!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 是相关的，因为我还没有解决这个问题。

【问题讨论】：

if(horses[i] < pickedNumber)。每个数组元素horses[i] 的值是多少？注释 if 行以发现它。

标签： javascript html css arrays dom

【解决方案1】：

如果我理解你的问题是正确的，你的目标是显示与随机整数一样多的马，游戏是计算马的数量并通过点击正确的数字来猜测。

一个不错的选择是添加一个隐藏大量马匹的 css 类。使用horses[i].classList.add("hidden")（并删除所有其他类，以便能够在猜测后重新初始化）。我重新安排了您的代码以不使用全局变量并使用更具描述性的函数名称。但关键的变化在于你的 for 循环。

还要注意新的 cssclass：

    .hidden {
        display: none;
    }

希望对你有帮助。

    
    function init(){
        var numberOfHorses = getRandomInt(22);

        hideOrShowHorses(numberOfHorses);
        setGuessingAlternatives(numberOfHorses)
    }

    function hideOrShowHorses(numberOfHorses){
        console.log("will display", numberOfHorses, "horses")
        var horses = document.querySelectorAll(".horse")

        for (var i = 0; i < horses.length; i++){
            if (i < numberOfHorses){
                horses[i].classList.remove("hidden")
            } else {
                horses[i].classList.add("hidden")
            }
        }
    }     

    function setGuessingAlternatives(numberOfHorses) {
        /* TBI */
        var optionA = (numberOfHorses + 2)
        var optionB = (numberOfHorses - 1)
        var guess = document.querySelectorAll(".guess")
    }     

    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }

    init()

    body {
         background: url("cartoonFarm.jpg") no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow: hidden;
        z-index: 0;
    }

    .hidden {
        display: none;
    }

    .square p {
        margin: 0;
        background: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }


    .square {
        width: 30%;
        border: red dashed 4px;
        background: white;
        padding-bottom: 30%;
        color: red;
        float: left;
        position: relative;
        margin: 1.66%;
        border-radius: 25%;
        transition: background 0.6s;
        -webkit-transition: background 0.6s;
        -moz-transition: background 0.6s;
        display: inline-block;
    }

    @media(min-width: 768px) {
        .square {
            width:30%;
        }
    }

    .test {
        display: block;
    }

    .hide {
        display: none;
    }


    .horse {
        width: 50px;
        height: 50px;
        margin: 0 8px;

    }

    @media(min-width: 576px) {
        .horse {
            width:  60px;
            height: 60px;
        }
    }

    @media (min-width: 768px) {
        .horse {
            width:  75px;
            height: 75px;
            margin: 0 15px;
        }
    }

    @media (min-width: 1000px) {
        .horse {
            width:  100px;
            height: 100px;
            margin: 0 20px;
        }
    }

    .horses{
        padding-top: 20%;
    }

    .container {
        text-align: center;
        padding-top: 20px;
    }

    <!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>

【讨论】：

非常感谢您这样做。你能向我解释我做错了什么或者我错过了什么吗？我现在正在检查代码，但只是为了让我能理解。感谢您的帮助！
我认为主要问题是您的比较horses[i] < pickedNumber，它将DOM 节点（horses 是节点列表，请参阅developer.mozilla.org/en-US/docs/Web/API/NodeList）与数字（pickerNumber）进行比较。您只需要将迭代器 (i) 与 pickedNumber 进行比较。你也缺乏隐藏它的方法，而 css 绝对可以用于此目的。