jquery: возьмите div title attr, вставьте его в изображение src

Question

Я создаю лайтбокс для создаваемого веб-сайта, нет, я не хочу использовать уже созданный, я хочу сделать свой собственный.

когда пользователь нажимает на какое-то место на веб-сайте, у меня есть jquery, захватывает атрибут title и вставляет его в изображение src, а затем вставляет этот тег изображения в .overlay_content

все работает, за исключением того, что он не захватывает заголовок, переменная не работает, и я не знаю, что я сделал неправильно, он вставляет grabbed-img в src для изображения, а не заголовок span.overlay_img

     $(document).ready(function() {
        $('.overlay_img').click(function (){
            var docHeight = $(document).height();
            var grabbed_img = $(this).attr('title'); 

            $(".overlay_bg").height(docHeight).fadeIn(300, function(){
                $(".overlay_content").html("<img src='grabbed_img'>").fadeIn(300); 
                });
            });

        });

Answer 1

Вы уверены, что это не захватывает название? Вы пробовали оповещение, чтобы проверить его?

alert(grabbed_img)

Похоже, это может быть проблема с этой строкой:

        $(".overlay_content").html("<img src='grabbed_img'>").fadeIn(300); 

Должно быть:

        $(".overlay_content").html("<img src='" + grabbed_img + "'>").fadeIn(300); 

Answer 2

не захватывает заголовок, потому что вы не указываете ему захватить заголовок изображения, вы указываете захватить заголовок div, а у него его нет

    $('.overlay_img img')

Answer 3

Попробуйте выполнить следующее в строке 7 вашего скрипта:

(".overlay_content").html("<img src='" + grabbed_img + "'>").fadeIn(300);

Нет переменной интерполяции типа, который вы пытаетесь использовать в JavaScript.Вам нужно собрать строку, используя оператор конкатенации.