【发布时间】：2017-06-12 16:35:43
【问题描述】：
我想使用 JS 和 JSON 更改 img src 的内容（在 HTML 代码上），但我无法获得。
有两个$.getJSON 调用是由于我不知道在同一个调用中获取一个数组和一个对象，对不起这个糟糕的代码但我想记住你这不是问题（这段代码很粗糙，但它可以工作）
问题：
当点击fa fa-search-plus fa-3x图标调用$('.imagen-go').click(function()时，在对话框页面上替换（应该）imagen-to-show（使用JQM 1.4.5 sintax），这样它将显示来自JSON的图像。
我认为：由于$.getJSON 是异步的，在获得files = files['files']; JS 之前运行其余代码（比$.getJSON 更快）当它到达变量subLoc8 时仍然为空。请同时阅读我关于内联代码的注释，以便更好地理解。
我该如何解决？
JS代码：
$( document ).on( "pageinit", "#page-1", function( event ) {
var parser_origin = 'http://xxxxxx.com';
var path_thumb1 = '/upload_menus/thumb1/' + id_establecimiento() +'/';
var img_tmpl = '/upload_tmpl/upload.jpg';
//get data[] (array). 1er JSON. start
$.getJSON( parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/r.shw.menu.php", { site: id_establecimiento(),idioma: to_translate(),traduccion: traduc_usada() }, function(data){
for (var i=0, len=data.length; i < len; i++) {
console.log(data[i]);
}
data = data['data'];
//get files{} (object) . 2nd JSON. start
$.getJSON( parser_origin + "/_country/spain/v137/lacarte.restaurants.back/alacarte/php/r.shw.menu.php", { site: id_establecimiento(),idioma: to_translate(),traduccion: traduc_usada() }, function(files){ //files // ori
for (var z=0, len=files.length; z < len; z++) {
console.log(files[z]); //required!!
}
files = files['files'];
// Now two nested $.each(), to iterate on 1st JSON and get objects of 2nd JSON. It`s work fine!
// 1st loop. sections
$.each(data, function (i, v) {
collapsible.push(v.es_un);
$.each(collapsible, function (i, v) {
if ($.inArray(v, seccion) === -1) {
seccion.push(v);
}
});
});
// 2nd loop. items into sections
$.each(seccion, function (i, loc) {
var parent = loc;
var elements = '';
$.each(data, function (x, sub) {
var subLoc = sub.nombre;
var subLoc2 = sub.condimentos;
var subLoc5 = sub.DT_RowId;
var subLoc6 = sub.alergeno;
var subLoc7 = sub.nota_item;
var subLoc8 = sub.image;
// check if have a picture
if (subLoc8 == null || subLoc8 == '') {
var foto_mostrar_listview = img_tmpl; // if not, assign a dummy image for not empty
}
else if (subLoc8 != null){// if, yes, get it
var foto_mostrar_listview = files.files_menus[subLoc8].web_path_thumb2;
};
var foto_f = '<img src="'+ foto_mostrar_listview +'" alt="img25"/>';
if (sub.es_un == parent) {
elements += '<li class="ui-li-has-thumb ui-first-child">'+ foto_f +'<h2>'+ subLoc + '</h2><h3>' + subLoc2 + '<h3><p>' + '</p><h6><h6><h1 class="ui-li-aside" style="right:0.80em">' + '<i class="fa fa-hashtag" aria-hidden="true"></i>'+ '<span class="notranslate">' + items + '<span></h1>' + '</li><a href="#popupPhotoPortrait" data-position-to="window" data-transition="fade" class="imagen-go" id="' + subLoc8 + '"><span class="fontawesome"><i class="fa fa-search-plus fa-3x" aria-hidden="true"></i></span></a></p>'
items++;
} //end if (sub.es_un)
});//$.each(data...)
$("#location-list").append($("<div/>").append($("<div/>", {
"data-role": "collapsible",
"data-collapsed": "true",
"data-collapsed-icon": "carat-r",
"data-expanded-icon": "carat-d",
"class": parent,
"style" : "margin : 8px 4px"
}).append($("<h3/>").text(parent)).append($("<ul/>", {
"data-role": "listview",
"data-theme": "e",
"data-count-theme": "b",
}).append(elements).listview()))).collapsibleset('refresh');
}); //$.each(seccion,...)
}); //fin del getJSON files{}
}); //fin del getJSON data[]
});// end ( document ).on
$('.imagen-go').click(function() {
var id= $(this).attr("id");
var extension = ".jpg";
document.getElementById('imagen-to-show').src = path_thumb1 + id + extension ; // ori
}); // end ('.imagen-go')
HTML：关注问题（对话页面）：
...
<!-- DIALOG page. Show picture. start -->
<div data-role="dialog" id="popupPhotoPortrait" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back"
class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
<img src="" alt="Foto del item" id="imagen-to-show" style="width: 100%">
</div><!-- /Dialog -->
...
JSON 输出：关注与上述代码相关的变量。来自 1er JSON 和 2nd JSON
"web_path_thumb2":"\/upload_menus\/thumb2\/342800010\/748.jpg", //2nd JSON
"image":"757" // 1st JSON
【问题讨论】：