Как связать между собой несколько элементов?
Вот есть у меня 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, время: 10:02. |