为变量(js)中的每个元素定义一个图像。

Question

这个脚本工作得很好，但是有一个问题。

如何添加图像(“var映像”)中的元素('var pastaction‘)中出现的图像。

​

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>

​

当前显示的图像对于('var pastactions')中的所有通知是共享的。

我需要分别为('var pastactions')中的每个通知指定一个图片。

我怎么能用javascript做到这一点。

谢谢你的时间

Answer 1

您需要这样指定您的pastactions。

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

现在，您需要像在这段代码中一样，将键title和image放入其中。并删除我之前添加的代码的

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

您可以为每个pastactions指定图像，只需重写image键。