Я устанавливаю 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();
});});
извините, я исправил код сейчас,
DIV создается динамически?
что значит быть динамичным?
Вот что это значит. stackoverflow.com/questions/22612263/… Новички в jQuery очень часто путаются, почему они ничего не могут сделать с динамически созданными элементами.
Внутри функции «щелчок» вы должны выбрать правильный элемент, который нужно скрыть. Думаю, лучшим решением будет root-div с id "prod-pop-up".
Так что, возможно, попробуйте:
$(document).ready(function(){
$("#close-pop-up").click(function(){
$('#prod-pop-up').hide();
});
});
извините, я исправил код сейчас, я указал неправильный идентификатор,
$(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, потому что без него он портит макет.
Я превратил ваш вопрос в исполняемый фрагмент. Можете ли вы вернуть неработающий код в свой вопрос, чтобы другим было легче понять исходную проблему? И подумать о том, чтобы принять ответ, который кто-то усердно трудился для вас?
привет, я отредактировал свой вопрос, я только что отредактировал его, чтобы он был моим исходным вопросом,
где элемент с id
toggle
?