为变量内的每个元素定义一个图像（js）

Question

This script works fine, but there is a problem.

How to add an image that appears with an element inside ('var pastactions') of images inside ('var images').

 var sp_freqency = 14500; var sp_timeout = 1200; var popbackup = ""; 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']; var pastactions = ["Luna - Moon Nightlight Lamp", "Removable Lights LED Rainbow Lamp", "Born Pretty - Nail Art Kit", "Ocean Blue Fire Opal Ring", "Camellia Japonica Seeds - 15 Seed Pack"]; fn_UpdateSocialProofData(); $(".custom-social-proof").stop().slideToggle('slow'); var togglevar = setInterval( function() { fn_ToggleSocialProof(); }, sp_freqency); $(".custom-close").click(function() { clearTimeout(popbackup); clearTimeout(togglevar); $(".custom-social-proof").stop().slideToggle('slow'); }); function fn_UpdateSocialProofData() { var selectedname = names[Math.floor(Math.random() * names.length)]; var selectedtown = towns[Math.floor(Math.random() * towns.length)]; var selectedImage = images[Math.floor(Math.random() * images.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 ); $( "#avatar" ).attr('src', selectedImage ); $( "#sp_time" ).text( timeperiod ); } function fn_ToggleSocialProof() { $(".custom-social-proof").stop().slideToggle('slow', function() { fn_UpdateSocialProofData(); }); popbackup = setTimeout( function() { $(".custom-social-proof").stop().slideToggle('slow'); }, sp_timeout); } function fn_Percentage(para_percent) { if (Math.random() < para_percent/100) { return true; } return false; } function fn_RecentTimeGen() { if (fn_Percentage(80)) { return fn_PluralReturn(10,"hour","hours") + " ago"; } return fn_PluralReturn(59,"min","mins") + " ago"; } function fn_FutureTimeGen() { if (fn_Percentage(80)) { return fn_PluralReturn(6,"day","days") + " from now"; } return fn_PluralReturn(1,"week","weeks") + " from now"; } function fn_PastTimeGen() { if (fn_Percentage(80)) { return fn_PluralReturn(6,"day","days") + " ago"; } return fn_PluralReturn(1,"week","weeks") + " ago"; } function fn_PluralReturn(para_number,para_nonplural,para_plural) { var l_number = Math.ceil(Math.random() * para_number) if (l_number == 1) { return "" + l_number + " " + para_nonplural } return "" + l_number + " " + para_plural }

 @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600'); .custom-social-proof { position: fixed; bottom: 20px; left: 20px; z-index: 9999999999999;important: font-family, 'Open Sans'; sans-serif: display; none. }:custom-notification { border; 0: text-align; left: z-index; 99999: box-sizing; border-box: font-weight; 400: border-radius; 6px: box-shadow, 2px 2px 10px 2px hsla(0, 4%, 4%. 0;2): background-color; #fff: position; relative: cursor; pointer. }:custom-notification-container { display; flex:important; align-items: center; height. 80px: };custom-notification-image-wrapper img { max-height: 75px; width: 90px; overflow: hidden; border-radius: 6px 0 0 6px; object-fit. cover: };custom-notification-content-wrapper { margin: 0; height: 100%; color: gray; padding-left: 20px; padding-right: 20px; border-radius: 0 6px 6px 0; flex: 1; display: flex;important: flex-direction; column. justify-content: center; }:custom-notification-content { font-family; inherit:important; margin: 0;important: padding; 0:important; font-size: 14px; line-height: 16px; } small { margin-top: 3px.important; display. block:important; font-size: 12px;important: opacity; :8; }:custom-close { position; absolute: top; 8px: right. 8px; height: 12px; width: 12px; cursor. pointer: transition: :2s ease-in-out; transform: rotate(45deg); opacity: 0; }:custom-close;:before { content; "": display; block: width; 100%: height; 2px. background-color: gray: position: absolute; left: 0; top: 5px; }:custom-close;:after { content; "": display; block: height; 100%: width; 2px. background-color: gray: position; absolute; left: 5px; top: 0; } .custom-close:hover{ opacity: 1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-social-proof"> <div class="custom-notification"> <div class="custom-notification-container"> <div class="custom-notification-image-wrapper"> <img id="avatar" src="https://static.cashbacker.com/imgs/blank-avatar.png"> </div> <div class="custom-notification-content-wrapper"> <p class="custom-notification-content" id="customername"> <span id="sp_customername"></span> in <span id="sp_location"></span> <br> <strong><span id="sp_actionname"></span></strong> <small id="sp_time"></small> </p> </div> </div> <div class="custom-close"></div> </div> </div>

The images currently displayed is shared for all notifications in ('var pastactions').

I need to specify a picture for each notification in ('var pastactions') separately.

How can I do that with javascript.

Thanks for your time

Answer 1

You need to specify your pastactions like this.

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"}];

Now you need to put keys title and image like in this code. And also remove my previous added code's

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']

AND

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

You can specify images for each pastactions just overriding the image keys.