如何從這個大div元素獲取圖像元素？

所以我的代碼使用json2html塊是如何從這個大div元素獲取圖像元素？

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屬性。

來源

2017-06-09 KCB4Rockstar

由於語法錯誤，因此無法執行alert或showPic。

.children在沒有在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方法，得到了一個錯誤「無法設置屬性未定義‘的innerHTML’」。不確定內容來自哪裏，但您可能需要仔細檢查。

來源

2017-06-09 22:57:27 javaBean007

感謝您對兒童的瞭解和查找。所以我意識到代碼沒有運行，因爲它在錯誤的JS文件中。我修正了這個問題，但是當showPic使用你的代碼執行時，showPic無法從圖像中獲取src屬性。我必須從圖像元素中獲取圖像的來源。我會更新問題。這是$（this）.find的控制檯日誌（'img'） > [img.img-responsive，prevObject：r.fn.init（1）] – KCB4Rockstar

我找到了答案。

$(this).find('img')產生一個數組，所以我加了[0].src來最終得到源代碼。

來源

2017-06-10 00:10:40 KCB4Rockstar

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

]};

來源

2017-10-30 18:17:52

如何從這個大div元素獲取圖像元素？

回答

相關問題