将图像源更改为不同页面上的图像源答案

【问题标题】：Changing Image source to that of Image on different a page将图像源更改为不同页面上的图像源
【发布时间】：2019-06-05 13:20:57
【问题描述】：

我想将一个图像源更新为不同页面上另一个图像的源。

我正在为家具创建一个方形空间商店。家具有多种季节性材料可供选择，每 6 个月选择一次。我希望我所在的公司能够轻松地更新所有产品的材料集合，而不必为每个产品单独更改它。所以我的想法是首先为每个产品添加占位符图像，然后有一个单独的页面来描述材料。如果材料页面上的图像发生变化，所有占位符图像也会更新。

我希望这可以工作，但我得到了一个错误：

stoff2:740 Uncaught SyntaxError: Invalid or unexpected token

此错误指向$('img[alt... 行。

$(document).ready(function() {
  var count;
  var newSrc;
  for (count = 1; count < 5; count++) {
    var adress = "http://uk5-shop.com/stoff" + count;
    $.get(adress, function(data) {
      newSrc = document.getElementById("5cf7ba50095f4e0001e1519c").src;
    });
    $(‘img[alt = ”stoff” + count]’).src = newSrc;
  };
});

【问题讨论】：

标签： javascript jquery html src alt

【解决方案1】：

首先，错误是因为‘在JS中不是一个有效的字符。 ” 和 ’ 也是如此。您需要分别使用' 和"。

但是，您的逻辑还有其他几个问题。

首先，您在 AJAX 请求之后使用 document.getElementById() 来访问响应，但这只会访问当前页面。要解决此问题，请使用提供给函数的 data 参数来检索响应的 HTML，并在其中找到您需要的 src 属性。

其次，您需要在$.get() 的AJAX 回调中更新src 内，而不是在它之外，并且jQuery 对象也没有src 属性。您需要使用prop() 或attr()。

接下来，[alt=...] 选择器中的引号本身即使已更正，也会不匹配。您过早地关闭了属性值引号，并且缺少 + 以在 count 之后连接字符串的结尾。

最后，为了避免count 值不是您在 AJAX 请求返回时所期望的值（由于循环已完成）出现的问题，您需要使用闭包，或者仅使用 let 关键字假设您定位的浏览器支持它。

说了这么多，试试这个：

$(document).ready(function() {
  for (let count = 1; count < 5; count++) {
    var address = "http://uk5-shop.com/stoff" + count;
    $.get(address, function(data) {
      var newSrc = $(data).find("#5cf7ba50095f4e0001e1519c").prop('src');
      $('img[alt="stoff' + count + '"]').prop('src', newSrc);
    });
  };
});

顺便说一句，我建议为此使用 AJAX 有点浪费。对于加载的每个页面，您都会向服务器发出额外的 5 个页面请求，只是为了获取某些图像的位置。如果可能的话，我建议您重新考虑此逻辑以获取服务器端的这些位置，以避免服务器上出现这种不必要的负载。

【讨论】：