Fatal编程技术网
  • image/
  • Image 如何将img src从$.getJSON更改为？

Image 如何将img src从$.getJSON更改为？

image

Image 如何将img src从$.getJSON更改为？,image,getjson,src,Image,Getjson,Src,我想使用JS和JSON更改imgsrc（在HTML代码上）的内容，但我无法获得 有两个$。getJSON调用是由于我不知道如何在同一个调用中获取一个数组和一个对象，对这段糟糕的代码表示抱歉，但我想提醒您这不是问题（这段代码很粗糙，但很有效） 问题是： 当点击fa-fa-search+fa-3x图标调用$（'.imagen go'）。点击（function（）），替换（应该）imagen在对话框页面上显示（使用JQM 1.4.5 sintax），这样它将显示来自JSON的图像 我认为：由于$.ge

我想使用JS和JSON更改
imgsrc
（在HTML代码上）的内容，但我无法获得

有两个
$。getJSON
调用是由于我不知道如何在同一个调用中获取一个数组和一个对象，对这段糟糕的代码表示抱歉，但我想提醒您这不是问题（这段代码很粗糙，但很有效）

问题是：

当点击
fa-fa-search+fa-3x
图标调用
$（'.imagen go'）。点击（function（）
），替换（应该）
imagen在对话框页面上显示
（使用JQM 1.4.5 sintax），这样它将显示来自JSON的图像

我认为：由于
$.getJSON
是异步的，所以在获取
文件之前=文件['files']；
JS在到达变量
subLoc8
时运行其余的代码（比
$.getJSON
更快）。请阅读我关于内联代码的注释，以便更好地理解

我怎样才能解决

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')
我找到了解决方案：放入$.getJSON调用中，该函数检测显示图像的点击按钮（从JSON中获取“id”值）

这里是最后一个有效的代码！！：

问候

$( 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,...)

// funtion that detect click on button (take "id" value from JSON)
$('.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')

    }); //fin del getJSON files{}
    });  //fin del getJSON data[]

});// end ( document ).on

$（document）.on（“pageinit”，“第1页”，函数（事件）{
var解析器_origin=http://xxxxxx.com';
var path_thumb1='/upload_menumes/thumb1/'+id_establecimiento（）+'/'；
var img_tmpl='/upload_tmpl/upload.jpg'；
//获取数据[]（数组）.1er JSON.start
$.getJSON（parser_origin+“/_country/spain/v137/lacarte.restaurants.back/alacarte/php/r.shw.menu.php“，{site:id_establecimento（），idioma:to_translate（），traduccion:traduc_usada（），函数（数据）{
对于（变量i=0，len=data.length；i'+'+'+items+'+'>
'
项目++；
}//如果结束（sub.es_un）
})/$。每个（数据…）
$（“#位置列表”）。追加（$（“”）。追加（$（“”）{
“数据角色”：“可折叠”，
“数据已折叠”：“true”，
“数据折叠图标”：“克拉-r”，
“数据扩展图标”：“克拉-d”，
“班级”：家长，
“样式”：“边距：8px 4px”
}).append（$（“”）.文本（父级））.append（$（“
    ）”，{
“数据角色”：“列表视图”，
“数据主题”：“e”，
“数据计数主题”：“b”，
}).append（elements.listview（））.collapsableset（'refresh'）；
})/$。每个（seccion，…）
//检测点击按钮的功能（从JSON获取“id”值）
$（'.imagen go'）。单击（函数（）{
var id=$（this.attr（“id”）；
var extension=“.jpg”；
document.getElementById（'imagen-to-show'）.src=path\u thumb1+id+extension；//ori
})；//结束（'.imagen go'）
})；//fin del getJSON文件{}
})；//fin del getJSON数据[]
})；//结束（文档）.on
我找到了解决方案：放入$.getJSON调用中，该函数检测显示图像的点击按钮（从JSON中获取“id”值）

这里是最后一个有效的代码！！：

问候

$( 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,...)

// funtion that detect click on button (take "id" value from JSON)
$('.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')

    }); //fin del getJSON files{}
    });  //fin del getJSON data[]

});// end ( document ).on

$（document）.on（“pageinit”，“第1页”，函数（事件）{
var解析器_origin=http://xxxxxx.com';
var path_thumb1='/upload_menumes/thumb1/'+id_establecimiento（）+'/'；
var img_tmpl='/upload_tmpl/upload.jpg'；
//获取数据[]（数组）.1er JSON.start
$.getJSON（parser_origin+“/_country/spain/v137/lacarte.restaurants.back/alacarte/php/r.shw.menu.php“，{site:id_establecimento（），idioma:to_translate（），traduccion:traduc_usada（），函数（数据）{
对于（变量i=0，len=data.length；i$( 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,...)

// funtion that detect click on button (take "id" value from JSON)
$('.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')

    }); //fin del getJSON files{}
    });  //fin del getJSON data[]

});// end ( document ).on