Форум

Alex00001 · #1 (**permalink**) 06.04.2018, 21:09

Ребят, только начинаю знакомиться с js. Помогите никак не могу понять почему не работает код. FF выдает ошибку
TypeError: $(...).getElementsByClassName is not a function pop_up.js:8:16

сам код:

$(document).ready(function () {
   $(".image").click (function () {
       var img = $(this);
       var src = img.attr('src');
       var scrt = $(window).scrollTop();
       $("body").append("<div class='popup'><div class='popup_bg'></div><img src='" + src + "' class='popup_img'/></div>");
       $(".popup").fadeIn(800);
       var s = $(document).getElementsByClassName("popup");
       for (i=0;i<s.length;i++){
           s[i].style.top = scrt+"px";
       }       
       $(".popup_bg").click (function () {
           $(".popup").fadeOut(800);
           setTimeout(function () {
               $(".popup").remove();
           }, 800);
       });
   }); 
});

laimas · #2 (**permalink**) 06.04.2018, 21:26

Строка 8 должна быть

var s = $('.popup');

sortarray · #3 (**permalink**) 06.04.2018, 21:28

laimas,
странно, а что возвращает $(document)?

рони · #4 (**permalink**) 06.04.2018, 21:47

Сообщение от sortarray

$(document)?

обьект jquery, где в ключе "0" находиться document

можно так

var s = $(document)[0].getElementsByClassName("popup");

но зачем?

рони · #5 (**permalink**) 06.04.2018, 22:22

Alex00001,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
    position:relative;
  }

  .image{
    margin-top:1500px;
    width:300px;
  }

  .popup img{
    width:80%;
  }

  .popup_bg:after{
    content:"x";
    font-size:48px;
    margin-top:50px;
    display:block;
    text-align:right;
  }

  .popup{
    text-align:center;
    position:absolute;
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    $(".image").click(function() {
        $(".popup").remove();
        var src = this.src;
        var top = $(window).scrollTop();
        var popup = $("<div class='popup'><div class='popup_bg'></div><img src='" + src + "' class='popup_img'/></div>")
        .css({
            top: top
        }).appendTo("body").hide().fadeIn(800);
        $(".popup_bg", popup).click(function() {
            popup.fadeOut(800, function() {
                popup.remove();
            });
        });
    });
});
  </script>
</head>

<body>
<img src="http://okultureno.ru/upload/medialibrary/40e/bk_info_orig_75900_1474440457.jpg"  class="image" alt="">

</body>
</html>

Alex00001 · #6 (**permalink**) 07.04.2018, 04:03

Ребят, спасибо что так оперативно откликнулись.

Форум

Справочник

Discord чат

Курсы javascript