How to get image element from this large div element?

Question

So I have a template of a block of code using json2html that is

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}'}
            ]}
        ]}
    ]}
]};

The bold part is a image that I want to run a function showPic(img); where the "img" is the 4th line of the template.

The div with the "product" class is what I want to be clicked by the user and it targets the img and sends the img to showPic.

I want it to target .product using jQuery.

Here's how the code is at the moment. http://ttrltest.000webhostapp.com/tbcl-products.html

I tried edit With help from replies:

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

and I can't get the src attribute from the image element.

Answer 1

Neither alert or showPic are being executed because you are have syntax error.

.children used without wrapping this in jquery $(), evaluates to a property not a function. You are probably looking for the function instead. Additionally the children function only returns direct children, looking at your images they are several elements down in the DOM. Use the find() instead.

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

Edit

Careful when switching between plain Javascript and Jquery. Now you are working with JQuery objects inside of your showPic method. Update your method:

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

Note: I tried your showPic method on your site, was getting an error "cannot set property 'innerHTML' of undefined". Not sure where content is being set from, but you may want to double check.

Answer 2

I found the answer.

$(this).find('img') produces an array so I added [0].src to finally get the source.

Answer 3

If you're already using jQuery then use the jquery plugin for JSON2HTML which supports jquery embedded events. Here's how you can add a onclick attribute directly to the transform so you don't have to add it later using 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}'}
        ]}
    ]}
]}

]};