Javascript 使用jQuery更改SquareSpace上的图像

无法在正方形空间中更改图像。我已经很接近了，但我还没有解决这个问题

我正在尝试生成一个随机数，使用该数字从我的图片数组中选择一张照片，并用该图像替换我画廊的背景

我的jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
 $(document).ready( function() { 
    const index = randomMove(0, pictures.length),
    picture = pictures[index];

   // Gets the img tag under the imageWrapper class
   const test = $('.imageWrapper > img');
   // Gets the first index of the div (the image I want to manipulate)
   const test1 = test[0];
   // trying to change the picture
   // I have tried attr('src', picture) as well and did not work
   const test2 = $(test1).data("currentSrc", picture);
 })

 const randomMove = (mi, ma) => {
  const min = Math.ceil(mi),
    max = Math.floor(ma),
    selection = Math.floor(Math.random() * (max - min) + min);

  return selection;
};

  const pictures = [
    "https://i.imgur.com/bsG8hx7.jpg",
    "https://i.imgur.com/Vuw28Lq.jpg",
    "https://i.imgur.com/09Cfuks.jpg",
    "https://i.imgur.com/3TRmorT.jpg",
    "https://i.imgur.com/JElBKPO.jpg",
    "https://i.imgur.com/eSTVz8D.jpg",
    "https://i.imgur.com/3n1z9uc.jpg",
    "https://i.imgur.com/aW5HWI5.jpg",
    "https://i.imgur.com/5uEtErN.jpg",
    "https://i.imgur.com/HMHehUy.jpg"
  ];
 </script>

$（文档）.ready（函数（）{
常量索引=随机移动（0，图片长度），
图片=图片[索引]；
//获取imageWrapper类下的img标记
常量测试=$（'.imageWrapper>img'）；
//获取div（我要处理的图像）的第一个索引
常量test1=测试[0]；
//试图改变现状
//我也试过attr（'src'，picture），但没有成功
常量test2=$（test1）.data（“currentSrc”，图片）；
})
常量随机移动=（mi，ma）=>{
const min=数学单元（mi），
最大值=数学地板（ma），
选择=Math.floor（Math.random（）*（max-min）+min）；
返回选择；
};
常量图片=[
"https://i.imgur.com/bsG8hx7.jpg",
"https://i.imgur.com/Vuw28Lq.jpg",
"https://i.imgur.com/09Cfuks.jpg",
"https://i.imgur.com/3TRmorT.jpg",
"https://i.imgur.com/JElBKPO.jpg",
"https://i.imgur.com/eSTVz8D.jpg",
"https://i.imgur.com/3n1z9uc.jpg",
"https://i.imgur.com/aW5HWI5.jpg",
"https://i.imgur.com/5uEtErN.jpg",
"https://i.imgur.com/HMHehUy.jpg"
];

我认为这个问题最大的挑战是HTML使用“数据src”和“数据图像”，而不是仅仅使用“src”。这也可能不是解决这个问题的正确方法

这是我的错误日志：

下面是显示上述数据src和数据图像属性的HTML代码：

Update 评论了3条备选jQuery语句，它们应该有助于操纵Squaresoft映像（由于我没有Squaresoft站点，所以未经测试）

---

您可以取消对jQuery对象的引用，使其成为普通对象

$（'.imageWrapper img'）[0].src

…并使用诸如

.src

之类的简单属性来操作值

参考：

有关详细信息，请参见演示中的注释

演示

$（函数（）{
常量图片=[
"https://i.imgur.com/bsG8hx7.jpg",
"https://i.imgur.com/Vuw28Lq.jpg",
"https://i.imgur.com/09Cfuks.jpg",
"https://i.imgur.com/3TRmorT.jpg",
"https://i.imgur.com/JElBKPO.jpg",
"https://i.imgur.com/eSTVz8D.jpg",
"https://i.imgur.com/3n1z9uc.jpg",
"https://i.imgur.com/aW5HWI5.jpg",
"https://i.imgur.com/5uEtErN.jpg",
"https://i.imgur.com/HMHehUy.jpg"
];
//回调函数传递数组
函数更改img（数组）{
//将数组传递给shuffle函数获取结果
var url=shuffle（数组）；
/*将结果指定给img的src属性
||注：括号符号[0]
||这将取消对jQuery对象的引用，因此
||将其更改为普通对象
||一旦成为普通对象，简单的属性
||例如，可以使用.src。
*/
$（'.imageWrapper img'）[0].src=url；
//这是jQuery中的等价项
//$（'.imageWrapper img'）.attr（'src'，url）；
/*方软图像的求解*/
/*如果阵列图片具有
||指向上载到的图像的适当URL
||网站。
*/
/*ALT 1.所有属性都已分组
$（'.imageWrapper img'）.attr({
'src'：url+'？格式=1500w'，
“数据src”：url，
“数据图像”：url
});
*/
/*ALT 2.attr（）和.data（）链接
$（'.imageWrapper img'）.att（'src'，url+'？format=1500w'）.data（{'src'：url，'image'：url}）；
*/
/*ALT 3.取消引用jQObj和普通JavaScript
$（'.imageWrapper img'）[0].src=url+'？格式=1500w'；
$（'.imageWrapper img'）[0].setAttribute（'data-src'，url）；
$（'.imageWrapper img'）[0].setAttribute（'data-image'，url）；
*/
}
//费希尔·耶茨洗牌
// https://stackoverflow.com/a/962890/2813224
函数洗牌（数组）{
var i=0，
j=0，
温度=零；
对于（i=array.length-1；i>0；i-=1）{
j=数学楼层（数学随机（）*（i+1））
温度=数组[i]
数组[i]=数组[j]
数组[j]=temp
}
返回数组[j]；
}
//添加用于演示目的
$（'button'）。在（'click'，function（）上{
更改（图片）；
});
});
更改图像
FYI：如果您希望跨浏览器兼容该信息，则不应在脚本标记中使用es6（常量、箭头函数等）。我更改了代码。你想在什么地方加载你的图像？如果是背景图像，为什么不试试
$（test1.css（.css（'background-image'，'url（'+imageUrl+'））
根据这个问题：@chasenbetinger请发布一个包含最少HTML量的帖子。
data src
和
data image
属性在我们知道它们属于什么以及它们可能具有的值之前是不够的（尽管我可以有根据地猜测
data src
应该是什么值）@Chasenbetinger已经注意到了，先生。请看我回答中的评论。注意，我删除了第二条评论，所以请刷新页面，以防万一，同时，我也感谢您的帮助。它不起作用，可能是因为我最近添加的评论。这是我的日志：这是html:@Chasenbetinger好的，这解释了很多。您需要将每个图像加载到您的站点，记下指向所述上载的每个新url。然后使用我修改的函数。修改为：
$（'.imageWrapper img'）.attr（{'data-src'：url，'src'：url+'？format=1500w'，'data-image'：url}）
。此外，必须更改阵列
图片
，以反映新的uploads@ChasenBettingerFYI squaresoft正在进行一些繁重的图像管理，因此您应该将图像上传到您的站点并利用它，忘记外部图像（不管是否使用imgur用于演示目的，并且您正常上传图像）