Question

我试图遍历一个包含产品编号的数组（价格，数量等）。产品编号用于生成在不同功能中调用的图像。当我调用函数并将循环变量传递给它时，在循环完成之前没有任何反应。然后生成所有产品图像，但它们是相同的。我不知所措。

for (var g = 0, len = oldDetails.length; g <= len - 1; g++) {
    loaditem (oldDetails[g]['product_number'],g);
}
function loaditem (itemnumber, itemlocation) {
     document.getElementById('divid' + itemlocation).innerHTML = '<img src = "' + itemnumber + '.jpg" />';
}

非常感谢任何帮助。

编辑我发布完整的代码以供参考

      //alert (JSON.stringify(oldDetails));
     setTimeout(function() {
       for (var g = 0, len = oldDetails.length; g <= len - 1; g++) {
         count = 'somestring' + g;
         loaditem(oldDetails[g]['product_number'], count);
         if (g < len - 1) {
           duplicate();
         }
       }
     }, 1000);

     function loaditem(newItemNumber, count) {
       itemNumber = newItemNumber.toUpperCase();
       //ARMS Handler
       switch (itemNumber.substring(0, 1)) {
         case 'A':
           lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
           break;
         case 'R':
           lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
           break;
         case 'M':
           lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
           break;
         case 'N':
           lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
           break;
         default:
           lookupNumber = itemNumber;
       }
       //dash handler
       if (itemNumber.substring(4, 5) == '-') {} else {
         lookupNumber = lookupNumber.replace('-', '');
       }
       count = count.substr(count.length - 1, count.length);
       orderDetails[count][0] = itemNumber; //adds product # to orderDetail array
       imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '_con.jpg';
       var imageTest = $("<img>");
       var imageTest_con = $("<img>");
       imageTest.attr('src', imgSource).load(function() {
           document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
         })
         .error(function() {
           imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '.jpg';
           imageTest_con.attr('src', imgSource).load(function() {
               document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
             })
             .error(function() {
               imgSource = 'http://hekmancontract.andrewchristmann.com/quote-sheet/images/image-missing.jpg';
               document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
             });
         });

       document.getElementById('pnum' + count).innerHTML = " " + itemNumber.toUpperCase();
     }

Answer 1

现在您已发布完整代码，可以查明问题您在loaditem方法中使用的全局变量。

如果将它们转换为本地（，因为它们因每次迭代而被更改），它应该可以工作。

像这样的东西

function loaditem(newItemNumber, count) {
  var itemNumber = newItemNumber.toUpperCase(),
      lookupNumber;
  //ARMS Handler
  switch (itemNumber.substring(0, 1)) {
    case 'A':
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
      break;
    case 'R':
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
      break;
    case 'M':
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
      break;
    case 'N':
      lookupNumber = itemNumber.replace(itemNumber.substring(2, 3), '0');
      break;
    default:
      lookupNumber = itemNumber;
  }
  //dash handler
  if (itemNumber.substring(4, 5) == '-') {} else {
    lookupNumber = lookupNumber.replace('-', '');
  }
  count = count.substr(count.length - 1, count.length);
  orderDetails[count][0] = itemNumber; //adds product # to orderDetail array
  var imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '_con.jpg';
  var imageTest = $("<img>");
  var imageTest_con = $("<img>");
  imageTest.attr('src', imgSource).load(function() {
      document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
    })
    .error(function() {
      imgSource = 'http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/767/image480/' + lookupNumber.toLowerCase() + '.jpg';
      imageTest_con.attr('src', imgSource).load(function() {
          document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
        })
        .error(function() {
          imgSource = 'http://hekmancontract.andrewchristmann.com/quote-sheet/images/image-missing.jpg';
          document.getElementById("product-image" + count).innerHTML = '<img src="' + imgSource + '" width="100%" height="auto" />';
        });
    });

  document.getElementById('pnum' + count).innerHTML = " " + itemNumber.toUpperCase();
}

所以问题是你声明了一些全局变量，同时你设置了一些使用这些变量的异步回调（ load和error事件）

对于调用loadItem的循环的每次迭代，全局变量都会被更改，而这些全局变量的实际值将在>加载时使用 异步）。因此，在图像加载之前，imgSource变量将更改其值，然后将用于实际的DOM img插入。

Javascript函数在循环

1 个答案: