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

Question

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

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

我希望它能工作，但我收到了一个错误：

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;
  };
});

Answer 1

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

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

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

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

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

最后，为了避免 count 值不是您在 AJAX 请求 returns 时期望的值的问题（由于循环已完成），您需要使用一个闭包，或者只是 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 个页面请求，只是为了获取一些图像的位置。如果可能的话，我建议您 re-factor 使用此逻辑在服务器端获取这些位置，以避免服务器上出现这种不必要的负载。

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

Changing Image source to that of Image on different a page

html

javascript

jquery

src

alt