无法在数组中循环 jQuery 对话框

Question

我在使用索引文件中的以下 div ID 代码在特定数组中设置 jQuery 对话框时遇到问题：

<div id="dialog"></div>

现在从一个数组生成一个对话框，该数组位于一个子文件夹的 javascript 文件中，代码如下：

"pins": [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/up.png"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "http://test/images/pins/down.png"
  }
];


var pins = "<div id=dialog ></div>";
$(function() {
  $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("src").on("click", function() {
    $("#dialog").dialog("open");
  });
});

我想在 image-pin url 上使用 onclick 函数初始化 3 个对话框，加载 name-value 作为框的标题，将 status-value 作为框内的文本加载。

我已经尝试了一百种方法，但都没有成功。

Answer 1

逻辑是，为数组中的每一项生成img，在其上绑定click事件。当用户点击它时，你会将#dialog中的img的src替换为点击图片的src。最后，打开对话框。

如果我理解正确的话，应该是这样的：

var pins = [{
    "name": "A",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633276/pexels-photo-633276.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "B",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633501/pexels-photo-633501.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  },
  {
    "name": "C",
    "status": "Lorem Ipsum",
    "src": "https://images.pexels.com/photos/633548/pexels-photo-633548.jpeg?h=350&dpr=2&auto=compress&cs=tinysrgb"
  }
];

$.each(pins, function(i, pin) {
  $('body').append('<img src="' + pin.src + '" class="src" />');
});

$(function() {
  var dialog = $("#dialog").dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });

  $("img").on("click", function() {
    dialog.find('img').attr('src', $(this).attr('src'));
    dialog.dialog("open");
  });
});

.src {
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin: 10px;
}

#dialog img {
  max-width: 100%;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog">
  <img />
</div>