如何在此jquery中插入一个onclick以从json获取图像的详细信息(图像也从json获取)

Question

$(document).ready(function () {
    var jsonURL = "search.json";
    $.getJSON(jsonURL, function (json)
    {
         var imgList= "";
         $.each(json.Images, function () {
            imgList += '<li><img src= "' + this.image + '"></li>';
         });});

上面是从 json 获取图像的脚本。

Answer 1

我希望您有一些按钮或 ui 元素，您可以在其上附加 onclick 事件。喜欢：

<div id="target">
  Click here
</div>

在 jquery 中，你需要给 ui 元素的点击处理程序一个函数。你这样做是这样的：

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

如果您看到 ，$("#target").click函数中您传递了一个function。在您的情况下，这应该是获取图像的函数。现在这应该很容易。

Answer 2

好的，首先，你的代码中有两个错误。

在这一行中

$.each(json.Images, function () {

您的json文件中没有任何名为 Images 的对象，而是有项目

而且在您的json文件中，列表末尾有一个，（逗号）会导致错误，您的$.getJSON不会解析数据。

所以，在解决了这些问题之后，我认为最简单的方法是使用自定义数据属性

假设您有一个名为 myList 的 HTML 元素，则代码将如下所示：

$(document).ready(function () {
    var jsonURL = "search.json";
    $.getJSON(jsonURL, function(json){
        var imgList = '';
        $.each(json.Items, function(){
            imgList += '<li><img id="img'+this.id+'" src="'+this.image+'" data-name="'+this.name+'" data-location="'+this.location+'" data-quantity="'+this.quantity+'"></li>';
        });
        $("#myList").html(imgList);
        $("#myList li img").on('click', function(){
            var  myData = " name: "+$(this).data("name")+"n location: "+$(this).data("location")+"n quantity: "+$(this).data("quantity");
            console.log(myData);
        });
    });
});