#javascript #html #jquery
Вопрос:
Первый раз задаю вопрос. Я думаю, мне следует упомянуть, что я новичок в javascript/jquery.
У меня есть галерея, в которой отображаются подробные сведения об изображении при наведении (в виде текста). И при нажатии он выполняет javascript, который открывает iframe и изменяет атрибут src на href элемента div, на который был нажат.
Теперь это работает хорошо, но не очень удобно для мобильных устройств, потому что на сенсорном устройстве нет наведения. Таким образом, мобильные посетители не могут видеть подробную информацию об изображениях.
Я не так хорошо знаком с javascript, я просто нахожу сценарии на форумах (в основном здесь), немного изменяю их, объединяю больше сценариев, чтобы достичь того, чего я хочу. Поэтому я не знаю, как я могу изменить текст, что сценарий, который мог бы заменить текст «загрузка…» под тег iframe элемент для описания того, что дел у меня щелкнуло. Он только все усложняет, что текст я должен изменить, чтобы не в Родительском div и скрипт проверяет, чтобы заменить в src, но у ребенка див классифицируются «описание».
Вот «исходный» html:
<div class="work categ1 categ2" href="https://youtube.com/embed/example">
<img class="ref" src="/portfolio/example1.png">
<div class="description">EXAMPLE1 </br> (2016) </div>
</div>
<div class="work categ3" href="http://webpage-example">
<img class="ref" src="/portfolio/example2.png">
<div class="description">EXAMPLE2 </br> (2014) </div>
</div>
<div class="work categ3" href="https://youtube.com/embed/example2">
<img class="ref" src="/portfolio/example3.png">
<div class="description">EXAMPLE3 </br> (2013) </div>
</div>
Это html-код всплывающего фрейма:
<div class="popup">
<iframe class="popupVid" width="560" min-height="300px" src="https://www.youtube.com/embed/" title="Embed video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img src="/img/x.png" style="height:45px">
<p class="description">LOADING...</p>
</div>
И вот текущий javascript:
<script>
$(document).ready(function(){
$(".popup").hide();
$(".work").on("click", function(e) {
e.preventDefault();
$(".popup").show();
$("iframe").eq(0).attr("src", $(this).attr("href"));
})
$(".popup").on("click", function(e) {
$(".popup").hide();
$("iframe").eq(0).attr("src", "");
})
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
$(".popup").hide();
$("iframe").eq(0).attr("src", "");
}
});
</script>
Чтобы помочь немного лучше понять сценарий, div класса «всплывающее окно» заполняет все окно полупрозрачным черным цветом. Поэтому, когда вы нажмете за пределами iframe, он закроет iframe.
Надеюсь, я поделился всем, что нужно. Я надеюсь, что кто-нибудь сможет мне помочь. Заранее спасибо!
Комментарии:
1. Что-то вроде $(‘.описание’).html («подробности описания здесь»);
2. Спасибо за вашу помощь! Я нашел этот код, но он просто изменил упомянутую часть на текст, определенный в javascript, поэтому этот код не выбирает описание из нажатого div.
Ответ №1:
Просто для тех, кто ищет быстрый ответ, код Назира решил проблему.
То, что он добавил, были эти строки в javascript:
var desc = $(this).find('.description').text();
$(".description_popup").text(desc);
И он изменил класс ЗАГРУЗОЧНОГО текста на что — то другое:
<p class="description_popup">LOADING...</p>
И это все! Это то, как вы меняете текст под всплывающим окном на текст текущего нажатого div.
Спасибо тебе, Назир!
Ответ №2:
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="work categ1 categ2" href="https://youtube.com/embed/example"><img class="ref" src="/portfolio/example1.png"><div class="description">EXAMPLE1 </br> (2016)</div></div>
<div class="work categ3" href="http://webpage-example"><img class="ref" src="/portfolio/example2.png"><div class="description">EXAMPLE2 </br> (2014)</div></div>
<div class="work categ3" href="https://youtube.com/embed/example2"><img class="ref" src="/portfolio/example3.png"><div class="description">EXAMPLE3 </br> (2013)</div></div>
<div class="popup">
<iframe class="popupVid" width="560" min-height="300px" src="https://www.youtube.com/embed/" title="Embed video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img src="/img/x.png" style="height: 45px;">
<p class="description_popup">LOADING...</p>
</div>
</body>
<script>
$(document).ready(function(){
$(".popup").hide();
$(".work").on("click", function(e) {
e.preventDefault();
$(".popup").show();
$("iframe").eq(0).attr("src", $(this).attr("href"));
var desc = $(this).find('.description').text();
//console.log(desc);
$(".description_popup").text(desc);
})
$(".popup").on("click", function(e) {
$(".popup").hide();
$("iframe").eq(0).attr("src", "");
var desc = $(this).find('.description').text();
//console.log(desc);
$(".description_popup").text(desc);
})
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
$(".popup").hide();
$("iframe").eq(0).attr("src", "");
var desc = $(this).find('.description').text();
//console.log(desc);
$(".description_popup").text(desc);
}
});
</script>
Комментарии:
1. Ух ты, спасибо тебе! Это действительно сделало свое дело! Эти две отдельные строки сделали работу:
var desc = $(this).find('.description').text(); $(".description_popup").text(desc);я обнаружил, что она даже работает, если я добавлю ее только в первую часть сценария. Была ли причина, по которой необходимо было добавить его во всплывающие окна, закрывающие части сценария?2. Добро пожаловать, Дэвид.