随机JavaScript选择代码修复

Question

我有这个js代码

＆＃13;

＆＃13;

var img = {
  blue: '<img src="https://news.xbox.com/wp-content/uploads/PUBG-Key-Art-Square.png"/>',
  purple: '<i class="fa fa-money moneyx" aria-hidden="true"></i><span class="money2"> 0.20</span>',
  pink: '<img src="http://zxsite.ru//img/weapons/m4a1s-hyper.png"/>',
  red: '<img src="http://zxsite.ru/img/weapons/gutknife-doppler.png"/>',
  yellow: '<img src="http://zxsite.ru/img/weapons/awp-dlore.png"/>'
}

function reset(){
  $('.card').remove();
  for (var i = 0; i < 210; i++){
    var element = '<div class="card" style="background-color: lightblue;" data-rarity="PUBG" id=itemNumber'+i+'>'+img.blue+'</div>';
    var rand = random(1,10000)/100;
    if (rand < 30){
      element = '<div class="card" style="background-color: #181b1c; margin-left: 1px; margin-right: -2px; top: -5px;" data-rarity="+$0.20 instead of" id=itemNumber'+i+'>'+img.purple+'</div>';
    }
    if (rand < 5){
      element = '<div class="card" style="background-color: hotpink;" data-rarity="pink" id=itemNumber'+i+'>'+img.pink+'</div>';
    }
    if (rand < 2){
      element = '<div class="card" style="background-color: red;" data-rarity="red" id=itemNumber'+i+'>'+img.red+'</div>';
    }
    if (rand < 0.5){
      element = '<div class="card" style="background-color: yellow;" data-rarity="yellow" id=itemNumber'+i+'>'+img.yellow+'</div>';
    }

    $('#cardList').append(element);
  }
  
}

function openCase(){
  reset();
  var rand = random(1000,20000);
  var childNumber = Math.floor(rand/100)+4;
  //var timings = ["easeInOutBack","easeOutExpo","easeInOutBounce","easeOutQuad","swing","easeOutElastic","easeInOutElastic"];
  var timings = ["swing"];
  var timing = timings[random(0,timings.length)];
  var reward = $('#itemNumber'+childNumber).attr('data-rarity');
  

  
  $('.card').first().animate({
    marginLeft: -rand
  }, 5000, timing, function(){
    
    var src = $('#itemNumber'+childNumber+' img').attr('src');
    $('#itemNumber'+childNumber).css({background: "linear-gradient(#00bf09, #246b27)"});
    
    $('#dialog-msg').html("You have received "+reward+" game!"+"<br><img src="+src+">");
    
   
    
    
    $('#dialog').dialog({
      modal: true,
      title: "New item!",
      resizeable: false,
      draggable: false,
      width: 400,
      buttons: {
        "Receive item":function(){
          $(this).dialog("close");
          // add resources
        }
      }
    });
  });
  
  
  //$('.card').css({backgroundColor: 'red'})
  //$('.card:nth-child('+(childNumber+1)+')').css({backgroundColor: 'green'})
}

function random(min, max){
  return Math.floor((Math.random()*(max - min))+min);
}

＆＃13;

* {
  box-sizing: border-box;
}

#cardList {
  height: 100px;
  width: 800px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  background-color: red;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 100px;
  height: 100px;
}

.card > img {
  width: 100px;
  height: 100px;
}

.arrow-down {
  margin-left: 380px;
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}
#dialog-msg > img {
  width: 150px;
  height: 150px;
}
#dialog-msg {
  text-align: center;
}

＆＃13;

<div id=unbox-area>
  <div class="arrow-down"></div>
  <div id=cardList></div>
</div>
<button onclick="openCase();">Open</button>
<div id=dialog>
  <div id=dialog-msg></div>
</div>

＆＃13;

＆＃13;

＆＃13;

此代码用于随机选择一个图像并显示

我需要以下问题的帮助： 例如，当脚本选择并显示“红色”时，图像如何仅在选择该图像时添加其他文本或代码。

我试图自己做这件事，但对我来说似乎不可能，我是这个领域的新人。

Answer 1

您可以通过使用倍数属性创建对象

来执行此操作

图像源和相关文本以及您想要的任何内容。

＆＃13;

＆＃13;

var images = [
{red:{
  src:"url",
  text:"text"
}},
{blue:{
  src:"url2",
  text:"text blue"
}}
];


function getRandom(){
  var elem = images[Math.floor(Math.random()*images.length)];
  console.log("Element : ",elem)
}

for(var i = 0; i < 5; i++){
getRandom();
}

＆＃13;

＆＃13;

＆＃13;