Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2016, 16:58
Новичок на форуме
Отправить личное сообщение для sashaslow Посмотреть профиль Найти все сообщения от sashaslow
 
Регистрация: 24.08.2016
Сообщений: 3

Как связать между собой несколько элементов?
Вот есть у меня 2 блока, в левом отображается всяческая информация (которая лежи друг под другом, например, с помощью display: none или z-indюx, неважно), а в правом – куча миниатюр. По клику на миниатюру контент в блоке слева должен меняться на выбранный, то есть клик по миниатюре 4=контент4; клик по миниатюре 1=контент1. Как такое реализовать, а то я в js совсем зеленый. Может через жиквери будет попроще, ванилла не обязательна.

И еще, может быть как-то можно сделать подгрузку контента динамической (но это не первостепенная задача)? При использовании display: none и иже с ним контент все равно грузится, хоть и не виден, что не очень хорошо. Или это уже совсем в бэк технологии?

Буду благодарен за любую наводку. Спасибо!

http://codepen.io/sashaslow/pen/AXGWoJ
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2016, 18:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

sashaslow,
искать по открывашка и tabs
читать и использовать
делегирование
смотреть решение
https://learn.javascript.ru/task/image-gallery
http://plnkr.co/edit/5t7oDEbrx8G3UjUqtM2q?p=preview
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2016, 08:46
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от sashaslow
Может через жиквери будет попроще, ванилла не обязательна.
Что такое ванилла?
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2016, 10:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от warren buffet
Что такое ванилла?
фреймворк vanilla js - шуточное название javascript.
Ответить с цитированием
  #5 (permalink)  
Старый 25.08.2016, 12:52
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Я хотел узнать у ТС. А то он пишет ничего не понимаю в js, и тут же про ванилу. Не вяжется как-то.
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2016, 20:58
Новичок на форуме
Отправить личное сообщение для sashaslow Посмотреть профиль Найти все сообщения от sashaslow
 
Регистрация: 24.08.2016
Сообщений: 3

Да про делегирование я знаю.
Я решил делать так: по легенде, при клике на элемент обработчик должен вытаскивать его айди, после чего перебирать объект и менять разметку на значение ключа с этим айди.
Обосрался я где-то в районе перебора for, потому что не знаю как это сделать с условиями.
Этого франкинштейна можно оживить или я уже совсем с ума сошел?
Помогите с кодом, спасибо!

http://codepen.io/sashaslow/pen/YWmkrx
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2016, 21:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

большое фото по клику на маленьком 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>
Ответить с цитированием
  #8 (permalink)  
Старый 29.08.2016, 22:07
Новичок на форуме
Отправить личное сообщение для sashaslow Посмотреть профиль Найти все сообщения от sashaslow
 
Регистрация: 24.08.2016
Сообщений: 3

Систему понял! Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как c функцией .ajax() передать несколько значений в php? Faab jQuery 11 19.11.2013 12:03
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Несколько элементов + динамические + действия kapustnik Events/DOM/Window 1 26.07.2013 08:01
Как получить значения вышестоящих элементов дерева TreeStore ? Allan Stark ExtJS 1 31.07.2012 16:48
Как обработать несколько элементов подряд? vladymyrk jQuery 1 07.01.2009 20:33