不工作的JavaScript图像数组

Question

我正在为我的网站寻找一些帮助。我使用数组为我的图像持有不同的类别，但当我加载我的网站，它没有显示的图像，它提出了断裂的链接。我怎么才能解决这个问题？网站http://tacticalcards.esy.es/

            <button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
            <br />
            <div class=card-group>
                <img class="card" src="http://tacticalcards.esy.es/images/blank.png" id="cp1" />
                <p>Worth: &#163;<span id="w1">0</span></p>
            </div>

JAVASCRIPT

var bronze = "http://tacticalcards.esy.es/images/a.k.a.bronze.jpg";
var silver = new Array("http://tacticalcards.esy.es/images/ssgsilver.jpg","http://tacticalcards.esy.es/images/tacticalknife.silver.jpg","http://tacticalcards.esy.es/images/clockpistol.silver.jpg");
var gold = new Array("http://tacticalcards.esy.es/images/a.w.p.gold.jpg","http://tacticalcards.esy.es/images/m4ai-s.gold.jpg");
var legends = "http://tacticalcards.esy.es/images/karambitee.jpg";
var cards = new Array(bronze, silver, gold, legends);
function pack100(){
var c1 = Math.floor(Math.random() * cards.length);
document.getElementById("cp1").src = cards[c1];
var cp1 = document.getElementById('cp1').src;
if (cp1 == bronze){
        profit += 25;
        document.getElementById("w1").innerHTML = 25;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1  silver){
        profit +=50 ;
        document.getElementById("w1").innerHTML = 50;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1 == gold){
        profit += 100;
        document.getElementById("w1").innerHTML = 100;
        document.getElementById("profit").innerHTML = profit;
    };
    if (cp1 == legends){
        profit += 250;
        document.getElementById("w1").innerHTML = 250;
        document.getElementById("profit").innerHTML = profit;
    };
};

Answer 1

保留一个objects数组，每个对象都有一个键来区分源。还请注意，您需要找到2个随机数，第一个是获得随机object，第二个是从源数组中查找random-index。当我们处理数组的索引时，您必须拥有array中的所有图像源。

​

var bronze = ["http://tacticalcards.esy.es/images/a.k.a.bronze.jpg"];
var silver = ["http://tacticalcards.esy.es/images/ssgsilver.jpg", "http://tacticalcards.esy.es/images/tacticalknife.silver.jpg", "http://tacticalcards.esy.es/images/clockpistol.silver.jpg"];
var gold = ["http://tacticalcards.esy.es/images/a.w.p.gold.jpg", "http://tacticalcards.esy.es/images/m4ai-s.gold.jpg"];
var legends = ["http://tacticalcards.esy.es/images/karambitee.jpg"];

var cards = [{
  key: 'bronze',
  data: bronze
}, {
  key: 'silver',
  data: silver
}, {
  key: 'gold',
  data: gold
}, {
  key: 'legends',
  data: legends
}];

function pack100() {
  var profit = 0;
  var c1 = Math.floor(Math.random() * cards.length);
  var rand = Math.floor(Math.random() * cards[c1].data.length);
  document.getElementById("cp1").src = cards[c1].data[rand];
  var cp1 = cards[c1].key;
  if (cp1 == 'bronze') {
    profit += 25;
    document.getElementById("w1").innerHTML = 25;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'silver') {
    profit += 50;
    document.getElementById("w1").innerHTML = 50;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'gold') {
    profit += 100;
    document.getElementById("w1").innerHTML = 100;
    document.getElementById("profit").innerHTML = profit;
  };
  if (cp1 == 'legends') {
    profit += 250;
    document.getElementById("w1").innerHTML = 250;
    document.getElementById("profit").innerHTML = profit;
  };
};

<button class="open" onclick="pack100()">Open &#163;250 Cards.</button>
<br />
<div class=card-group>
  <img class="card" src="http://tacticalcards.esy.es/images/blank.png" id="cp1" />
  <p>Worth: &#163;<span id="w1">0</span>
  </p>
  <div id="profit"></div>
</div>

​

Fiddle Demo

Answer 2

您必须使用带有随机的二维数组，在此之前，您必须找到二维数组的长度。并将其设置到另一个数组中，以获得随机的2d数组。Ex或1或p3，也必须将所有这些转换为适当的2d数组。

我试着成功了。

var bronze =new Array( "http://tacticalcards.esy.es/images/a.k.a.bronze.jpg");
                var silver = new Array("http://tacticalcards.esy.es/images/ssgsilver.jpg","http://tacticalcards.esy.es/images/tacticalknife.silver.jpg","http://tacticalcards.esy.es/images/clockpistol.silver.jpg");
                var gold = new Array("http://tacticalcards.esy.es/images/a.w.p.gold.jpg","http://tacticalcards.esy.es/images/m4ai-s.gold.jpg");
                var legends = new Array("http://tacticalcards.esy.es/images/karambitee.jpg");
                var cards = new Array(bronze, silver, gold, legends);

                var arraycount=[cards[0].length,cards[1].length,cards[2].length,cards[3].length]
                function pack100(){
                var array0=Math.floor(Math.random() *arraycount.length) ;
                var c1 = Math.floor(Math.random() * arraycount[array0]);
                document.getElementById("cp1").src = cards[array0][c1];

                var cp1 = document.getElementById('cp1').src;
                if (cp1 == bronze){
                        profit += 25;
                        document.getElementById("w1").innerHTML = 25;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1==silver){
                        profit +=50 ;
                        document.getElementById("w1").innerHTML = 50;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1 == gold){
                        profit += 100;
                        document.getElementById("w1").innerHTML = 100;
                        document.getElementById("profit").innerHTML = profit;
                    };
                    if (cp1 == legends){
                        profit += 250;
                        document.getElementById("w1").innerHTML = 250;
                        document.getElementById("profit").innerHTML = profit;
                    };
            }