Как связать между собой несколько элементов?
Вот есть у меня 2 блока, в левом отображается всяческая информация (которая лежи друг под другом, например, с помощью display: none или z-indюx, неважно), а в правом – куча миниатюр. По клику на миниатюру контент в блоке слева должен меняться на выбранный, то есть клик по миниатюре 4=контент4; клик по миниатюре 1=контент1. Как такое реализовать, а то я в js совсем зеленый. Может через жиквери будет попроще, ванилла не обязательна.
И еще, может быть как-то можно сделать подгрузку контента динамической (но это не первостепенная задача)? При использовании display: none и иже с ним контент все равно грузится, хоть и не виден, что не очень хорошо. Или это уже совсем в бэк технологии? Буду благодарен за любую наводку. Спасибо! http://codepen.io/sashaslow/pen/AXGWoJ |
sashaslow,
искать по открывашка и tabs читать и использовать делегирование смотреть решение https://learn.javascript.ru/task/image-gallery http://plnkr.co/edit/5t7oDEbrx8G3UjUqtM2q?p=preview |
Цитата:
|
Цитата:
|
Я хотел узнать у ТС. А то он пишет ничего не понимаю в js, и тут же про ванилу. Не вяжется как-то.
|
Да про делегирование я знаю.
Я решил делать так: по легенде, при клике на элемент обработчик должен вытаскивать его айди, после чего перебирать объект и менять разметку на значение ключа с этим айди. Обосрался я где-то в районе перебора for, потому что не знаю как это сделать с условиями. Этого франкинштейна можно оживить или я уже совсем с ума сошел? Помогите с кодом, спасибо! http://codepen.io/sashaslow/pen/YWmkrx |
большое фото по клику на маленьком jquery
sashaslow,
медититруйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.gal img{
width: 150px;
height: 150px;
}
.show img{
width: 300px;
height: 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var people = [{
name: "Быдлокодер",
text: "Орешки",
big_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg",
mini_foto: "http://cs11383.vk.me/u163027882/-6/x_b91a42c8.jpg"
}, {
name: "Петрович",
text: "Помочь",
big_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg",
mini_foto: "http://puzzlecreation.ru/public/puzzles/preview/7/8/7851230827092014.jpg"
}];
people.forEach(function(item,i) {
var img = $("<img/>", {
src: item.mini_foto,
on: {
click: function() {
$(".show").html("");
$("<h1/>", {
text: item.name
}).appendTo(".show");
$("<img/>", {
src: item.big_foto
}).appendTo(".show");
$("<p/>", {
text: item.text
}).appendTo(".show");
}
}
}).appendTo(".gal")
!i && img.click()
})
});
</script>
</head>
<body>
<div class="gal"></div>
<div class="show"></div>
</body>
</html>
|
Систему понял! Спасибо!
|
| Часовой пояс GMT +3, время: 09:40. |