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

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

我正在为家具开一家squarespace商店。家具有多个季节性材料选项，每6个月选择一次。我希望我工作的公司能够轻松地更新所有这些产品的材料收集，而不必对每个产品单独进行更改。所以我的想法是首先在每个产品中添加占位符图像，然后有一个单独的页面来描述材料。如果材质页面上的图像发生更改，则所有占位符图像也会更新

我希望这能起作用，但我得到了一个错误：

stoff2:740未捕获的语法错误：无效或意外的令牌

此错误指向

$（'img[alt..

行）

$（文档）.ready（函数（）{
var计数；
var newSrc；
用于（计数=1；计数<5；计数++）{
变量地址=”http://uk5-shop.com/stoff“+计数；
$.get（地址、函数（数据）{
newSrc=document.getElementById（“5cf7ba50095f4e0001e1519c”）.src；
});
$（'img[alt=“stoff”+count]”）。src=newSrc；
};
});

首先，错误是因为

'

在JS中不是有效字符。

“

和

'

也是如此。您需要分别使用

'

和

”

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

首先，在AJAX请求之后使用

document.getElementById（）

来访问响应，但这将只访问当前页面。要解决此问题，请使用提供给函数的

data

参数来检索响应的HTML，并在其中找到所需的

src

属性

其次，您需要在

$.get（）

的AJAX回调中更新

src

，而不是在它之外，而且jQuery对象没有

src

属性。您需要使用

prop（）

或

attr（）

接下来，

[alt=…]

选择器中的引号本身，即使经过更正，也不匹配。您过早地关闭属性值引号，并且缺少

+

来连接

计数后的字符串结尾

最后，为了避免AJAX请求返回时
count
值不是您期望的值（由于循环已完成），您需要使用闭包，或者简单地使用
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);
    });
  };
});

$（文档）.ready（函数（）{
对于（让计数=1；计数<5；计数++）{
变量地址=”http://uk5-shop.com/stoff“+计数；
$.get（地址、函数（数据）{
var newSrc=$（数据）.find（#5cf7ba50095f4e0001e1519c”）.prop（'src'）；
$（'img[alt=“stoff'+count+'”）.prop（'src'，newSrc）；
});
};
});

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