Блог

Главная - Вопросы по программированию - скрыть элементы после определенного значения с помощью javascript

скрыть элементы после определенного значения с помощью javascript

#javascript #html #css #arrays #dom

#javascript #HTML #css #массивы #dom

Вопрос:

Я довольно тщательно искал это и, похоже, не могу найти ответ, и я не знаю, связано ли это с тем, что это не должно быть сделано таким образом, или я делаю это неправильно. Я просто изучаю JavaScript и пытаюсь создать игру для подсчета для моей дочери. На странице отображается 21 лошадь в div секциях, и у меня есть 3 поля, в которых будет 3 возможных варианта для правильного числа. В моем JavaScript я могу генерировать случайное число и хочу использовать это в качестве эталона. Я пытаюсь выполнить итерацию по массиву nodelist и добавить класс, чтобы не отображать ничего, что превышает выбранное число. Я также использовал консоль.регистрируйте все, что я могу придумать, чтобы попытаться увидеть, где я ошибаюсь. Я думаю, что моя проблема в том, что я изо всех сил пытаюсь привязать элементы непосредственно к оценке. До сих пор я пробовал несколько разных вариантов. Я не знаю, возможно ли то, что я пытаюсь сделать, просто невозможно с помощью 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 имеет значение, потому что я еще не добрался до этой проблемы.

Комментарии:

1. if(horses[i] < pickedNumber) . Каково значение каждого элемента массива horses[i] ? Прокомментируйте строку if, чтобы ее обнаружить.

Ответ №1:

Если я правильно понимаю ваш вопрос, ваша цель — показать столько лошадей, сколько случайное значение int, и что игра заключается в том, чтобы подсчитать количество лошадей и угадать, нажав на нужное число.

Хорошим вариантом является добавление 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>

Комментарии:

1. большое вам спасибо, это помогло. можете ли вы объяснить мне, что я делал неправильно или что я пропустил, я сейчас изучаю код, но только для того, чтобы я мог понять. спасибо за вашу помощь, это сработало!

2. я думаю, что основной проблемой было ваше сравнение horses[i] < pickedNumber , в котором сравнивается узел DOM ( horses это список узлов, см. developer.mozilla.org/en-US/docs/Web/API/NodeList ) с помощью number ( pickerNumber ). вам нужно только сравнить итератор ( i ) с pickedNumber . также вам не хватало способа скрыть это, и css абсолютно подходит для этой цели.