Div не будет скрывать с помощью функции скрытия JQuery

Я устанавливаю div, который будет скрыт по умолчанию. Когда страница загружается, я пытаюсь скрыть это с помощью jQuery.

Я также использую бутстрап

Я новичок в jquery, поэтому очень ценю вашу помощь.

Вот div в html файле

<!--POP-UP-->
<div class = "container hidden d-flex justify-content-center align-items-center" id = "prod-pop-up" >
    <div class = "row pop-up position-fixed">
        <div class = "circle position-absolute"></div>
        <div class = "col-5 d-flex align-items-end justify-content-end product-img">
            <img class = "" src = "img/OM Chicharon.png" alt = "">
            <div class = "variants d-flex flex-column">
                <button class = "btn active">80g</button>
                <button class = "btn">40g</button>
            </div>
        </div>
        <div class = "col-7 d-flex flex-column justify-content-between product-details">
            <div class = "up d-flex flex-column align-items-end">
                <a href = ""><img id = "close-pop-up" src = "imgs/pop-up-close.svg" alt = ""></a>
                <div class = "product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class = "price"><span>PHP</span>119.00</h3>
            </div>
            <div class = "down d-flex flex-column align-items-end">
                <p class = "text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class = "btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

а вот js файл

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#toggle').hide();
});});

где элемент с id toggle?

Alan Omar 26.12.2020 11:14

извините, я исправил код сейчас,

Kylefrancis Atienza 26.12.2020 16:28

DIV создается динамически?

Shawn 26.12.2020 18:35

что значит быть динамичным?

Kylefrancis Atienza 27.12.2020 06:51

Вот что это значит. stackoverflow.com/questions/22612263/… Новички в jQuery очень часто путаются, почему они ничего не могут сделать с динамически созданными элементами.

react_or_angluar 27.12.2020 08:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
101
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Внутри функции «щелчок» вы должны выбрать правильный элемент, который нужно скрыть. Думаю, лучшим решением будет root-div с id "prod-pop-up".

Так что, возможно, попробуйте:

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').hide();
   });
});

извините, я исправил код сейчас, я указал неправильный идентификатор,

Kylefrancis Atienza 26.12.2020 16:29

$(document).ready(function(){
$("#close-pop-up").click(function(){
    $('#prod-pop-up').hide();
});});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--POP-UP-->
<div class = "container hidden d-flex justify-content-center align-items-center" id = "prod-pop-up" >
    <div class = "row pop-up position-fixed">
        <div class = "circle position-absolute"></div>
        <div class = "col-5 d-flex align-items-end justify-content-end product-img">
            <img class = "" src = "img/OM Chicharon.png" alt = "No image">
            <div class = "variants d-flex flex-column">
                <button class = "btn active">80g</button>
                <button class = "btn">40g</button>
            </div>
        </div>
        <div class = "col-7 d-flex flex-column justify-content-between product-details">
            <div class = "up d-flex flex-column align-items-end">
                <a href = ""><img id = "close-pop-up" src = "https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt = ""></a>
                <div class = "product-name d-flex flex-column align-items-end">
                    <h4>oyster mushroom</h5>
                    <h1>Chicharon</h1>
                </div>
                <h3 class = "price"><span>PHP</span>119.00</h3>
            </div>
            <div class = "down d-flex flex-column align-items-end">
                <p class = "text-right prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor condimentum nunc vel euismod. Nam eget risus tortor. Proin a quam at enim tincidunt blandit ac eget justo.  </p>
                <button class = "btn rounded-pill buy-now">BUY NOW</button>
            </div>

        </div>
    </div>
</div>

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

Ответ принят как подходящий

Я думаю, вам стоит попробовать таким образом, может быть, это сработает

$(document).ready(function(){
   $("#close-pop-up").click(function(){
      $('#prod-pop-up').css("display", "none");;
   });
});

использовать css("display", "block"); для отображения контента и css("display", "none"); за сокрытие контента..

Я решил свою проблему. Я удалил класс d-flex. Я просто поместил весь div в секцию, чтобы сохранить класс d-flex, потому что без него он портит макет.

Я превратил ваш вопрос в исполняемый фрагмент. Можете ли вы вернуть неработающий код в свой вопрос, чтобы другим было легче понять исходную проблему? И подумать о том, чтобы принять ответ, который кто-то усердно трудился для вас?

react_or_angluar 27.12.2020 08:54

привет, я отредактировал свой вопрос, я только что отредактировал его, чтобы он был моим исходным вопросом,

Kylefrancis Atienza 27.12.2020 12:44

Другие вопросы по теме