Как получить элемент изображения из этого большого элемента div?

Question

Итак, у меня есть шаблон блока кода с использованием json2html, который

var template = {'<>':'div','class':'col-lg-12 col-md-24 col-sm-24 col-xs-24','html':[
    {'<>':'div','class':'product col-lg-offset-1 col-lg-22 col-md-offset-0 col-md-24 col-sm-offset-0 col-sm-24 col-xs-offset-0 col-xs-24','html':[
        {'<>':'div','class':'prodimg col-lg-8 col-md-8 col-sm-8 col-xs-8','html':[
            {'<>':'img','src':'${source}','alt':'${name}', 'class':'img-responsive'}
        ]},
        {'<>':'div','class':'prodetails col-lg-16 col-md-16 col-sm-16 col-xs-16','html':[
            {'<>':'span','class':'prodname','html':'${name}'},
            {'<>':'div','class':'mT20','html':[
                {'<>':'p','html':'${info1}'},
                {'<>':'p','html':'${info2}'},
                {'<>':'p','html':'${info3}'}
            ]}
        ]}
    ]}
]};

Жирная часть - это изображение, для которого я хочу запустить функцию showPic(img); где "img" - 4-я строка шаблона.

Div с классом "product" - это то, что я хочу, чтобы пользователь нажал на него, и он нацелен на img и отправляет img в showPic.

Я хочу, чтобы он был нацелен на.product, используя jQuery.

Вот как выглядит код на данный момент. http://ttrltest.000webhostapp.com/tbcl-products.html

Я пыталсяредактировать с помощью ответов:

$('.product').click(function(){
    showPic($(this).find('img'));
});

и я не могу получить атрибут src из элемента изображения.

Answer 1

Я нашел ответ.

$(this).find('img') производит массив, поэтому я добавил [0].src чтобы наконец получить источник.

Answer 2

Если вы уже используете jQuery, используйте плагин jquery для JSON2HTML, который поддерживает встроенные события jquery. Вот как вы можете добавить атрибут onclick непосредственно в преобразование, чтобы вам не пришлось добавлять его позже с помощью jquery.

var template = {'<>':'div','class':'col-lg-12 col-md-24 col-sm-24 col-xs-24','html':[
{'<>':'div','class':'product col-lg-offset-1 col-lg-22 col-md-offset-0 col-md-24 col-sm-offset-0 col-sm-24 col-xs-offset-0 col-xs-24','html':[
    {'<>':'div','class':'prodimg col-lg-8 col-md-8 col-sm-8 col-xs-8','html':[
        {'<>':'img','src':'${source}','alt':'${name}', 'class':'img-responsive'}
    ],'onclick':function(){
        //do whatever you need to here, like find your image etc..
            var $img = $(this).find('img');
        }},
    {'<>':'div','class':'prodetails col-lg-16 col-md-16 col-sm-16 col-xs-16','html':[
        {'<>':'span','class':'prodname','html':'${name}'},
        {'<>':'div','class':'mT20','html':[
            {'<>':'p','html':'${info1}'},
            {'<>':'p','html':'${info2}'},
            {'<>':'p','html':'${info3}'}
        ]}
    ]}
]}

]};

Answer 3

Ни предупреждение, ни showPic не выполняются, потому что у вас есть синтаксическая ошибка.

.children, используемый без переноса этого в jquery $(), оценивает свойство, а не функцию. Вы, вероятно, ищете функцию вместо этого. Кроме того, функция children возвращает только прямых потомков, глядя на ваши изображения, они являются несколькими элементами в DOM. Вместо этого используйте find().

$(".product").click(function(){
  showPic($(this).find('img'));
});

редактировать

Осторожно при переключении между простым Javascript и Jquery. Теперь вы работаете с объектами JQuery внутри вашего метода showPic. Обновите свой метод:

function showPic(img){
    content.innerHTML = "<img src='" + $(img).attr("src") + "' alt='' class='img-responsive center-block'>";
    modal.style.display = "block";
}

Примечание: я попробовал ваш метод showPic на вашем сайте, получая ошибку "не могу установить свойство 'innerHTML' из неопределенного". Не уверен, откуда устанавливается контент, но вы можете перепроверить.