如何从这个大的 div 元素中获取图像元素？答案

【问题标题】：How to get image element from this large div element?如何从这个大的 div 元素中获取图像元素？
【发布时间】：2017-11-12 01:09:44
【问题描述】：

所以我有一个使用 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 是我希望用户点击的内容，它以 img 为目标并将 img 发送到 showPic。

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

下面是目前的代码。 http://ttrltest.000webhostapp.com/tbcl-products.html

我试过了编辑在回复的帮助下：

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

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

【问题讨论】：

标签： javascript jquery html json2html

【解决方案1】：

因为语法错误，所以没有执行 alert 或 showPic。

.children 使用而不用 jquery $() 包装它，评估为属性而不是函数。您可能正在寻找该功能。此外，children 函数仅返回直接子级，查看您的图像，它们是 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 方法，收到错误“无法设置未定义的属性 'innerHTML'”。不确定内容是从哪里设置的，但您可能需要仔细检查。

【讨论】：

感谢您对儿童的澄清并找到。所以我意识到代码没有运行是因为它在错误的 JS 文件中。我修复了这个问题，但是当使用您的代码执行 showPic 时，showPic 无法从图像中获取 src 属性。我必须从图像元素中获取图像的来源。我会更新问题。这是$(this).find('img') > [img.img-responsive, prevObject: r.fn.init(1)]的控制台日志

【解决方案2】：

我找到了答案。

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

【讨论】：

【解决方案3】：

如果您已经在使用 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}'}
        ]}
    ]}
]}

]};

【讨论】：