ランダム配列はIDタグに付加されない

Question

イメージの配列をランダム化する方法を設定しました。これらのランダム化されたイメージは、html本文内のidタグに追加されます。私は2つの画像IDを設定し、画像IDにランダム化された画像配列を追加しようとしました。

ただし、画像は表示されません。

したがって、何が間違っていますか？助けてください。

コード：

var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/C.png", "lib/img/Brands/B.png"]; 
 

 
function Game_Congrats() { 
 

 

 

 
    //Randomised Brand Offer 
 
    //Auto populate into brand container once randomised 
 
    for (i = 0; i < $('#list').find('img').length; i++) { 
 

 
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); 
 

 
    //Assign Variable to generate random Brands 
 
    var Brand = BrandNameArray[random_BrandIndex]; 
 
    BrandNameArray.splice(random_BrandIndex, 1); 
 
    $('#Brand_' + (i + 1)).attr('src', Brand); 
 
    $('#Brand_' + (i + 1)).show(); 
 
    } 
 
} 
 

 
}

.GameWinBrand_Container { 
 
    position: absolute; 
 
    top: 950px; 
 
    left: 286px; 
 
    height: 250px; 
 
    width: 580px; 
 
    overflow: hidden; 
 
} 
 
.GameWinBrand_innerScroll { 
 
    position: relative; 
 
    width: 550px; 
 
    font-size: 30px; 
 
    text-align: justify; 
 
    color: #ffffff !important; 
 
    overflow: hidden; 
 
} 
 
.GameWinBrand_Container::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 
 
    border-radius: 12px; 
 
    background-color: #ffffff; 
 
} 
 
.GameWinBrand_Container::-webkit-scrollbar { 
 
    width: 12px; 
 
    background-color: #5e5767; 
 
} 
 
.GameWinBrand_Container::-webkit-scrollbar-thumb { 
 
    border-radius: 20px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); 
 
    background-color: #5e5767; 
 
}

<div class="GameWinBrand_Container"> 
 
    <div id="BrandWinlist" class="GameWinBrand_innerScroll"> 
 
    <img id="GameBrand_1" style="width:250px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');"> 
 
    <img id="GameBrand_2" style="width:250px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');"> 
 
    </div> 
 
</div>

Answer 1

あなたは間違ったIDの参照の束を持っていますidがlistの要素。

第二に、あなたがID Brand_1と画像要素を持っていない、...など

だからあなたのコードは、これに変更します。あなたはshowへの呼び出しをチェーンすることができます

for (i = 0; i < $('#BrandWinlist').find('img').length; i++) { 
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); 
    //Assign Variable to generate random Brands 
    var Brand = BrandNameArray[random_BrandIndex]; 
    BrandNameArray.splice(random_BrandIndex, 1); 
    $('#GameBrand_' + (i + 1)).attr('src', Brand).show(); 
} 

注意を。

またセレクタとループは次のように、より簡潔に書くことができます。

$('#BrandWinlist > img').each(function (i, img) { 
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); 
    //Assign Variable to generate random Brands 
    var Brand = BrandNameArray[random_BrandIndex]; 
    BrandNameArray.splice(random_BrandIndex, 1); 
    $(img).attr('src', Brand).show(); 
}); 

をそしてボーナスとして、あなたspliceことができますし、一度に削除要素を取得：

var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0]; 

Answer 2

imgタグのidがGameBrandのように起動します。あなたが持っていないので、あなたのループが実行されないすべての

まず：

変更この：

$('#Brand_' + (i + 1)).attr('src', Brand); 

へ：

$('#GameBrand_' + (i + 1)).attr('src', Brand);