Форум

Aleksandr Chirkov · #1 (**permalink**) 25.07.2017, 20:12

Добрый день! Нужна ваша помощь, подскажите пожалуйста, нужно сделать ряд картинок, при нажатии на которые, крупные их копии появляются в новом DIV.

Вот есть такой код;

<div class="window">
<img src="images/pictures/special1.jpg" alt="новая акция" id="newPic">
</div>


<div class="footerMain">
<img src="images/pictures/special1.jpg" alt="новая акция" id="special1" class="specialsPictures">
<img src="images/pictures/special2.jpg" alt="новая акция" id="special2" class="specialsPictures">
<img src="images/pictures/special3.jpg" alt="новая акция" id="special3" class="specialsPictures">
<img src="images/pictures/special4.jpg" alt="новая акция" id="special4" class="specialsPictures">
<img src="images/pictures/special5.jpg" alt="новая акция" id="special5" class="specialsPictures">
<img src="images/pictures/special6.jpg" alt="новая акция" id="special6" class="specialsPictures">
<img src="images/pictures/special7.jpg" alt="новая акция" class="specialsPictures">
<img src="images/pictures/special8.jpg" alt="новая акция" class="specialsPictures">
</div>

и есть обработчик:

$(".specialsPictures").click(function(){ 
$(".window").empty();
  ??
});

Я когда кликаю на одну из картинок, у меня срабатывает функция, которая убирает мою текущую картинку, как сделать так, чтобы подставлялась новая? Я хотел сделать что-то типо:
document.getElementById("window").scr = this.
Потому что, перед этим, я проверяю this (alertom) и у меня показывает, что передаётся HTML image, но только когда передаю this для src...он заменяется конечно, но на пустую картинку и я не могу понять, что конкретно передаёт this?

рони · #2 (**permalink**) 25.07.2017, 20:15

Aleksandr Chirkov,

$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
});

Aleksandr Chirkov · #3 (**permalink**) 25.07.2017, 20:21

Блин Рони спасибо! Я на это пол дня убил!! Буду читать мат часть!

Aleksandr Chirkov · #4 (**permalink**) 29.07.2017, 14:12

А можно ещё вопрос. Допустим я сделаю ещё один div-элемент и в него добавлю описание. То как мне сделать, чтобы по клику, у меня изменялось сразу 2 элемента div. то есть для нужной картинки, добавлялось нужное описание? Я вообще не очень понимаю, как через JavaScript можно связывать элементы. Я понимаю, что есть параметр Id, но как сказать программе, что если выбрана такая картинка, то изменить остальные div-элементы с нужным содержимым, не знаю.

Предположу, что-то типо этого

<img src="путь/файл.jpg" id="первый">

var картинка = document.getElementById("первый").onclick = newFunc();

function newFunc(){
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
});
$(".описание1").append("<p>Описание</p><нужные тэги></нужные тэги>")
else if...и.т.д 
};

Правильно я двигаюсь или есть вариант лучше?

j0hnik · #5 (**permalink**) 29.07.2017, 15:08

<html>
<head>
</head>
<body>
<div class="window">
<img src="images/pictures/special1.jpg" alt="новая акция" id="newPic">
<p>Описание</p>
</div>


<div class="footerMain">
<img src="images/pictures/special1.jpg" alt="новая акция" id="special1" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special2.jpg" alt="новая акция" id="special2" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special3.jpg" alt="новая акция" id="special3" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special4.jpg" alt="новая акция" id="special4" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special5.jpg" alt="новая акция" id="special5" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special6.jpg" alt="новая акция" id="special6" class="specialsPictures" title="бла бла бла">
<img src="images/pictures/special7.jpg" alt="новая акция" class="specialsPictures">
<img src="images/pictures/special8.jpg" alt="новая акция" class="specialsPictures">
</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$(".specialsPictures").click(function(){
$(".window img").attr({src: this.src});
$(".window p").html(this.title);
});
	</script>
</body>
</html>
</body>
</html>

или же можно брать описание из alt или создать data-title

Форум

Справочник

Discord чат

Курсы javascript