如何从这个大的div元素中获取图像元素?

时间:2017-06-09 22:39:39

标签: javascript jquery html json2html

所以我有一个使用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)函数的图像; &#34; img&#34;是模板的第4行。

与&#34;产品&#34;的div class是用户想要点击的内容,它以img为目标,并将img发送给showPic。

我希望它使用jQuery来定位.product。

这里是代码目前的情况。 http://ttrltest.000webhostapp.com/tbcl-products.html

我试过了 修改在回复的帮助下:

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

我无法从图片元素中获取src属性。

3 个答案:

答案 0 :(得分:0)

由于语法错误,无法执行alert或showPic。

。在没有将它包装在jquery $()中的情况下使用的子项,计算属性而不是函数。你可能正在寻找这个功能。此外,子函数只返回直接子项,查看图像,它们是DOM中的几个元素。改为使用find()。

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

修改

在普通Javascript和Jquery之间切换时要小心。现在,您正在使用showPic方法中的JQuery对象。更新您的方法:

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

注意:我在您的网站上尝试过您的showPic方法,但是收到错误&#34;无法设置属性&lt; innerHTML&#39;未定义&#34;。不确定从哪里设置内容,但您可能需要仔细检查。

答案 1 :(得分:0)

我找到了答案。

$(this).find('img')生成一个数组,因此我添加了[0].src以最终获得源代码。

答案 2 :(得分:0)

如果您已经在使用jQuery,那么请使用jquery插件来支持JQuery嵌入式事件的JSON2HTML。以下是如何将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}'}
        ]}
    ]}
]}

]};