どのようにこれらのhtmlイメージ要素を正しく反復処理し、それぞれ異なる、よりランダムなイメージをより簡潔に読み込むことができますか？

Question

私は、提示されたフレーバーテキストが属するhearthstoneカードを推測することを含む簡単なゲームをコーディングしようとしています。最終的にボタンはこの機能にリンクしてゲームを進めますが、それほど遠くには達していません。

私は4つのイメージ要素を作成し、それぞれにカードの配列からオブジェクトを選択するための固有のrandCard変数を作成しました。私はこれを元々1つの変数で試しましたが、すべての要素に同じイメージをロードしました。

私は4つのランダムオブジェクトのいずれかからテキストを印刷したいので、randCard変数を配列自体に入れ、新しい変数を作成しました。それぞれの画像IDは現在自分のrandCardで更新されていますが、私はこのコードを単純化しようとしていました。

これは私がそれを意図しているように機能させる唯一の方法ですが、私はJSとJQuery（これは私がこのプロジェクトをやっている理由です）経験を持つ人が、このコードをどのように繰り返しにくくするかを説明できれば。

ご協力いただきありがとうございます。お寄せいただきありがとうございます。

 var cards = []; //initializing array for card objects 

$.getJSON("cards.collectible.js", function(data) {  //card data is pulled from here 

    $.each(data, function(key, value) { 
     var imgPath = 'hscards/' + value.name + '.png'; 
     cards.push({"name": value.name, "flavor": value.flavor, "path": imgPath, "set": value.set}); 
    }); 

    console.log(cards); 

}); 



$(function(){ //block 1 variable determine a random object from the cards array 
      // block 2 updates each corresponding element 

var randCard1 = cards[Math.floor(Math.random() * cards.length)]; 
var randCard2 = cards[Math.floor(Math.random() * cards.length)]; 
var randCard3 = cards[Math.floor(Math.random() * cards.length)]; 
var randCard4 = cards[Math.floor(Math.random() * cards.length)]; 
var randCards = [randCard1, randCard2, randCard3, randCard4]; 
var randFlav = randCards[Math.floor(Math.random() * randCards.length)]; 

    $("#card1").hide().attr("src", randCards[0].path).attr("alt", randCards[0].name).fadeIn(); 
    $("#card2").hide().attr("src", randCards[1].path).attr("alt", randCards[1].name).fadeIn(); 
    $("#card3").hide().attr("src", randCards[2].path).attr("alt", randCards[2].name).fadeIn(); 
    $("#card4").hide().attr("src", randCards[3].path).attr("alt", randCards[3].name).fadeIn(); 
    $("#flavTxt").hide().html(randFlav.flavor).fadeIn(); 

    console.log(randFlav.flavor); 


}); 

Answer 1

forループのご提案ありがとうございます。私はこのループでうまく書き直しました。

var cards = []; 

$.getJSON("cards.collectible.js", function(data) { 
    $.each(data, function(key, value) { 
     var imgPath = 'hscards/' + value.name + '.png'; 
     cards.push({"name": value.name, "flavor": value.flavor, "path": imgPath, "set": value.set}); 
    }); 



var randCard0;var randCard1;var randCard2;var randCard3; 
var randCards = [randCard0, randCard1, randCard2, randCard3]; 

for (i = 0; i < 4; i++) { 
     randCards[i] = cards[Math.floor(Math.random() * cards.length)]; 
     console.log(randCards[i].name); 
     $("#card" + i).hide().attr("src", randCards[i].path).attr("alt", 
     randCards[i].name).fadeIn(); 
}; 

var randFlav = randCards[Math.floor(Math.random() * randCards.length)].flavor;   

$("#flavTxt").hide().html(randFlav).fadeIn(); 

console.log(randFlav); 

});