Javascript 如何在每次新通知中添加产品映像（js）

此脚本工作正常，但存在一个问题

如何添加带有自己通知的每个产品的图像

var sp_频率=14500；
var sp_超时=1200；
var popbackup=“”；
变量名称=[“Ibraheem”、“Amr”、“Ali”、“Ahned Samir”]；
var towns=[“加拿大多伦多刚刚收购”、“美国莫德斯托刚刚收购”、“加拿大多伦多刚刚收购”、“美国巴拉博刚刚收购”]；
var pastactions=[“月亮-月亮夜灯”、“可拆卸灯LED彩虹灯”、“天生美丽-指甲艺术套装”、“海洋蓝火蛋白石戒指”、“山茶籽-15粒种子包装”]；
fn_UpdateSocialProofData（）；
$（“.custom social-proof”）.stop（）.slideToggle（'slow'）；
var togglevar=setInterval（函数（）{
fn_切换到SocialProof（）；
}，sp_频率）；
$（“.custom close”）。单击（函数（）{
clearTimeout（popbackup）；
clearTimeout（togglevar）；
$（“.custom social-proof”）.stop（）.slideToggle（'slow'）；
});
函数fn_UpdateSocialProofData（）{
var selectedname=names[Math.floor（Math.random（）*names.length）]；
var selectedtown=towns[Math.floor（Math.random（）*towns.length）]；
var timeperiod=fn_RecentTimeGen（）；
若有（fn_百分比（80））{
selectedaction=pastactions[Math.floor（Math.random（）*pastactions.length）]；
timeperiod=fn_passtimegen（）；
}
若有（fn_百分比（33））{
timeperiod=fn_FutureTimeGen（）；
}
$（“#sp_customername”）.text（selectedname）；
$（“#sp_位置”）。文本（选择城镇）；
$（“#sp_actionname”）.text（selectedaction）；
$（“sp#U时间”）。文本（时间段）；
}
函数fn_ToggleSocialProof（）{
$（“.custom social-proof”）.stop（）.slideToggle（'slow'，function（）{
fn_UpdateSocialProofData（）；
});
popbackup=setTimeout（函数（）{
$（“.custom social-proof”）.stop（）.slideToggle（'slow'）；
}，sp_超时）；
}
功能fn_百分比（参数百分比）{
如果（数学随机（）

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:400600’；
.海关社会证明{
位置：固定；
底部：20px；
左：20px；
z索引：99999999999！重要；
字体系列：“开放式Sans”，无衬线；
显示：无；
}
.海关通知{
边界：0；
文本对齐：左对齐；
z指数：99999；
框大小：边框框；
字体大小：400；
边界半径：6px；
盒形阴影：2×2×10×2×2×hsla（0,4%，4%，0.2）；
背景色：#fff；
位置：相对位置；
光标：指针；
}
.自定义通知容器{
显示：flex！重要；
对齐项目：居中；
高度：80px；
}
.自定义通知图像包装器img{
最大高度：75px；
宽度：90px；
溢出：隐藏；
边界半径：6px 0 0 6px；
对象匹配：覆盖；
}
.自定义通知内容包装器{
保证金：0；
身高：100%；
颜色：灰色；
左侧填充：20px；
右边填充：20px；
边界半径：0 6px 6px 0；
弹性：1；
显示：flex！重要；
弯曲方向：立柱；
证明内容：中心；
}
.自定义通知内容{
字体家族：继承！重要；
边距：0！重要；
填充：0！重要；
字体大小：14px；
线高：16px；
}
小的{
利润率最高：3倍！重要；
显示：块！重要；
字体大小：12px！重要；
不透明度：.8；
}
.海关关卡{
位置：绝对位置；
顶部：8px；
右：8px；
高度：12px；
宽度：12px；
光标：指针；
转换：.2s易进易出；
变换：旋转（45度）；
不透明度：0；
}
.自定义关闭：：之前{
内容：“；
显示：块；
宽度：100%；
高度：2倍；
背景颜色：灰色；
位置：绝对位置；
左：0；
顶部：5px；
}
.自定义关闭：：之后{
内容：“；
显示：块；
身高：100%；
宽度：2倍；
背景颜色：灰色；
位置：绝对位置；
左：5px；
排名：0；
}
.自定义关闭：悬停{
不透明度：1；
}

在里面

在您的情况下您需要指定图像URL的数组

var names = ["Ibraheem", "Amr", "Ali", "Ahned Samir"];
var towns = ["Toronto. Canada  just bought","Modesto. United States  just bought","Toronto. Canada  just bought","Baraboo. United States  just bought"];
var images = ['https://static.cashbacker.com/imgs/blank-avatar.png', 'https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b']

然后在函数

fn\u updatesesocialproofdata

中添加随机图像url。然后将其设置为

#化身标签

html将是（将头像id添加到img）

现在，您需要将

title

和

image

这样的键放入此代码中。 并删除我以前添加的代码

var pastactions = [{title: "Luna - Moon Nightlight Lamp", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}, {title: "Removable Lights LED Rainbow Lamp", image: "https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b"}, {title: "Born Pretty - Nail Art Kit", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}, {title: "Ocean Blue Fire Opal Ring", image: "https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b"}, {title: "Camellia Japonica Seeds - 15 Seed Pack", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}];

和

var images = ['https://static.cashbacker.com/imgs/blank-avatar.png', 'https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b']

---

您可以为每个

passactions

指定图像，只需覆盖

image

键即可。

非常感谢。代码工作正常，但图像随机出现。我们可以为每种类型的动作定义一个特定的图像吗？（

code

）var pastactions=[“月月夜灯”、“可拆卸灯LED彩虹灯”、“天生美丽美甲套装”、“海洋蓝火蛋白石戒指”、“山茶籽-15种子包”]；我刚刚编辑了我的答案，请检查我编辑的版本@Diaplo

var pastactions = [{title: "Luna - Moon Nightlight Lamp", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}, {title: "Removable Lights LED Rainbow Lamp", image: "https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b"}, {title: "Born Pretty - Nail Art Kit", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}, {title: "Ocean Blue Fire Opal Ring", image: "https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b"}, {title: "Camellia Japonica Seeds - 15 Seed Pack", image: "https://static.cashbacker.com/imgs/blank-avatar.png"}];

var images = ['https://static.cashbacker.com/imgs/blank-avatar.png', 'https://www.flaticon.com/svg/vstatic/svg/147/147144.svg?token=exp=1612870516~hmac=c5a04c0d2df3b4158b30a9913604384b']

var selectedImage = images[Math.floor(Math.random() * images.length)];

function fn_UpdateSocialProofData() {
  var selectedname = names[Math.floor(Math.random() * names.length)];
  var selectedtown = towns[Math.floor(Math.random() * towns.length)];   

  var timeperiod = fn_RecentTimeGen();
  if (fn_Percentage(80)) {
    selectedaction = pastactions[Math.floor(Math.random() * pastactions.length)];
    timeperiod = fn_PastTimeGen();
  }
  if (fn_Percentage(33)) {
      timeperiod = fn_FutureTimeGen();
  }


    $( "#sp_customername" ).text( selectedname );
    $( "#sp_location" ).text( selectedtown );
    $( "#sp_actionname" ).text( selectedaction.title );
    $( "#avatar" ).attr('src', selectedaction.image ); // this code sets src of your img tag
  $( "#sp_time" ).text( timeperiod );
}