За последние 24 часа нас посетили 18860 программистов и 1638 роботов. Сейчас ищут 1712 программистов ...

Смена цвета фона при клике на картинку(Много картинок)

Тема в разделе "JavaScript и AJAX", создана пользователем domio, 20 дек 2016.

  1. domio

    domio Активный пользователь

    С нами с:
    18 дек 2012
    Сообщения:
    35
    Симпатии:
    5
    Доброй ночи.
    Есть задание с которым никак не могу справиться.

    Есть html кусок кода.
    Выглядит так
    HTML:
    1.     <h1 id="images">Images</h1>
    2.     <div class="gallery">
    3.         <div class="image"><img src="http://funkyimg.com/i/2mbiB.jpg" alt=""></div>
    4.         <div class="image"><img src="http://funkyimg.com/i/2mbiC.jpg" alt=""></div>
    5.         <div class="image"><img src="http://funkyimg.com/i/2mbiD.jpg" alt=""></div>
    6.         <div class="image"><img src="http://funkyimg.com/i/2mbiF.jpg" alt=""></div>
    7.         <div class="image"><img src="http://funkyimg.com/i/2mbiG.jpg" alt=""></div>
    8.         <div class="image"><img src="http://funkyimg.com/i/2mbiJ.jpg" alt=""></div>
    9.         <div class="image"><img src="http://funkyimg.com/i/2mbiK.jpg" alt=""></div>
    10.         <div class="image"><img src="http://funkyimg.com/i/2mbiL.jpg" alt=""></div>
    11.     </div>
    и js
    Код (Javascript):
    1. var images = document.getElementById("images");
    2. images.onclick = function() {
    3.     var img = document.getElementsByTagName('img');
    4.     for(var i = 0;i < img.length;i++){
    5.         img[i].style.display = 'block';
    6.         var src = img[i].src;
    7.         img[i].addEventListener('click', function(){
    8.             document.body.style.background = "url('"+src+"')";
    9.         });
    10.     }
    11. }
    Нужно чтобы при клике на h1 показывалась галерея из картинок, а при клике на картинку менялся фон body.
    У меня практически все работает вот только проблема в том что картинка всегда последняя(иенно последняя выводиться даже при клике на дугие).
    Подозреваю что надо использовать this, вот только не знаю как.

    Возможно кто-то подскажет что-то а может быть есть способ покороче.
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.799
    Симпатии:
    1.331
    Адрес:
    Лень
    ajax
     
  3. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    Код (Javascript):
    1. <script>
    2.     var gallery = document.getElementsByClassName("gallery");
    3.     gallery[0].onclick = function (e) {
    4.         src = e.target.attributes[0];
    5.         document.body.style.background = "url('"+src.nodeValue+"')";
    6.     };
    7. </script>
     
  4. domio

    domio Активный пользователь

    С нами с:
    18 дек 2012
    Сообщения:
    35
    Симпатии:
    5
    Благодарю, нашел решение утром. Возможно кому нибудь пригодиться.
    Код (Javascript):
    1. var images = document.getElementById("images");
    2. images.onclick = function() {
    3.     var img = document.getElementsByTagName('img');
    4.     for(var i = 0;i < img.length;i++){
    5.         //3 вариант
    6.         img[i].addEventListener('click', function () {
    7.               document.body.style.background = "url('"+this.src+"')";
    8.         });
    9.     }
    10. }