Question

我有一个问题，我无法弄清楚自己！我试图在悬停图像时交换图像。然而问题是从Json调用动态调用/加载图像。在JSON调用中，我需要创建一些变量以在JSON调用之外使用，这样我就可以交换图像。

我想我可以自己交换图像但是现在我无法创建一个可以在getJSON调用之外使用的变量。在我的情况下如何在iHover中使用var productHtml图像？

我认为回归iHover会做到这一点，但那并不是真的！现在iHover返回一个空字符串或使用[]空白数组。

任何帮助??

我的jQuery

 $.getJSON(url, function (data){

   ... stuff ... 
     $.each(product.related, function(index, rel){
       ... stuff ...

         var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

          var iHover = '';           
            $.getJSON(url, function (data){

              var image2 = rel.images[1]; // this needs to be the second image in the json file
              var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

            var productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'" alt="'+rel.fulltitle+'"/>';

Answer 1

我认为分配变量的问题在于范围：

var iHover = '';           
            $.getJSON(url, function (data){

              var image2 = rel.images[1]; // this needs to be the second image in the json file
              var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

如您所见，var image2只能在函数（数据）{}范围内访问，并且您尝试在最后一行的外部访问它。

您可能希望在与iHover相同的scrope中创建var image2和var image2Pic，并将它们设置为未定义 - 然后将它们加载到函数中的第二个范围内。希望它有所帮助。

编辑：这是我改变代码以摆脱范围问题的方法

$.getJSON(url, function (data){

   ... stuff ... 
     $.each(product.related, function(index, rel){
       ... stuff ...

         var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

          var iHover = '';
          var image2 = undefined;
          var image2Pic = undefined;
            $.getJSON(url, function (data){

              image2 = rel.images[1]; //REMOVED the var
              image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // REMOVED the var

             ... more stuff ...
              });

              iHover = image2Pic;
              return iHover;

            });

            var productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'" alt="'+rel.fulltitle+'"/>';

请注意＆＃34; undefined＆＃34;是javascripts将它设置为＆＃34;空的＆＃34; （或者在你的情况下var x =＆＃39;＆＃39;）

Answer 2

试试这个

.getJSON(url, function (data){

... stuff ... 
 $.each(product.related, function(index, rel){
   ... stuff ...

     var image = 'http://cdn.webshopapp.com/i/' + image_id_convert(rel.image) + '/100x150x2/image.jpg'; // this is the main image!!

        var productHtml;
        var iHover = '';           
        $.getJSON(url, function (data){

          var image2 = rel.images[1]; // this needs to be the second image in the json file
          var image2Pic = 'http://cdn.webshopapp.com/i/' + image_id_convert(image2) + '/100x150x2/image.jpg'; // this is needed to convert a string to an actual link!!

         ... more stuff ...
          });

          iHover = image2Pic;
          productHtml = '<img class="rollover" src="'+image+'" data-alt-src="'+iHover+'"      alt="'+rel.fulltitle+'"/>';

        });

        var

使用json调用的变量交换动态图像

2 个答案: