アレイ戻る '未定義' 結果

Question

Iは3つの配列を有しますimgタグ内の配列Eからランダムに生成されたイメージのいずれか1つ、配列Fのイメージが表示されます。

例： imgタグは、配列EからアイテムA.pngおよびアイテムC.pngを表示しています。アイテムAからアイテムA.pngをクリックすると、配列FのアイテムA1.pngが表示されます。

最後に、配列Fから表示された項目をクリックすると、配列Gの対応する項目が表示されます。

例： imgタグは、配列EからアイテムB.pngとアイテムA.pngを表示しています。また、アイテムEをアイテムB.pngでクリックすると、配列FからアイテムB1.pngが表示されます。そして、配列FからアイテムB1.pngをクリックすると、アイテムB2.pngが表示されます。

を私はアレイEから2つのランダムに生成されたアイテムを表示するために管理していると私はアレイEからイメージ項目のいずれかをクリックしたとき、私は正しいを取得することができる午前：私が行っている何

しかし、私はアレイFから画像アイテムをクリックしたとき、私はすることができません：配列F.

号から画像アイテム配列Gから任意のイメージアイテムを取得します。配列Gのconsole.logを実行すると、未定義の結果が返されます。そして、配列Gの項目のどれもが配列Fで実際に追加されることはありません。

私は間違ったことをしています。

*コード：*

Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"]; 
 
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"]; 
 
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"]; 
 
var Brand_list = []; 
 
var printOfferFrame = ""; 
 

 
//Randomised Brand Offer 
 
//Auto populate into brand container once randomised 
 
$('#BrandWinlist > img').each(function(i, img) { 
 
    random_BrandIndex = Math.floor(Math.random() * Array_E.length); 
 
    console.log("random_BrandIndex:" + random_BrandIndex); 
 

 
    var Brand = Array_E[random_BrandIndex]; 
 

 
    Brand_list.push(random_BrandIndex); 
 
    $(img).attr('src', Brand).show(); 
 
}); 
 

 
function selectBrand(index) { 
 
    selectedOffer = Array_F[Brand_list[index - 1]]; 
 
    console.log("selectedOffer: " + selectedOffer); 
 
    $("#Pa_Description").attr('src', selectedOffer).show(); 
 

 
    //THIS IS THE PART I AM HAVING AN ISSUE, RETURN RESULT IS UNDEFINED 
 
    var printOfferSelected = Brand_list[Brand_list.length - 1]; 
 
    console.log("printOfferSelected : " + printOfferSelected); 
 

 
    printOfferFrame = Array_G[parseInt(Array_F[Brand_list[index - 1]])]; 
 

 
    console.log("printOfferFrame : " + Array_G[printOfferSelected - 1]); 
 
} 
 

 
function PrinOffer() { 
 
    ajax_Print(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="GameWinBrand_Container"> 
 
    <div id="BrandWinlist" class="GameWinBrand_innerScroll"> 
 
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');"> 
 
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');"> 
 
    </div> 
 
</div> 
 

 
<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;"> 
 

 
    <button class="Print" onclick="PrintOffer()"></button> 
 
</div>

Answer 1

次のことを試してみてください。

Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"]; 
 
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"]; 
 
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"]; 
 

 

 
//Randomised Brand Offer 
 
//Auto populate into brand container once randomised 
 
$('#BrandWinlist > img').each(function(i, img) { 
 
    random_BrandIndex = Math.floor(Math.random() * Array_E.length); 
 
    console.log("random_BrandIndex:" + random_BrandIndex); 
 
    var Brand = Array_E[random_BrandIndex]; 
 
    $(img).attr({'src':Brand,'data-index':random_BrandIndex}).show(); 
 
}); 
 
$('.GameWinBrand_innerScroll img').on('click',function(e){ 
 
    e.preventDefault(); 
 
    index = $(this).attr('data-index');//get index of the img 
 
    $("#Pa_Description").attr('src', Array_F[index]).show();//here you may need to use parent to show it 
 
    console.log("printOfferSelected : " + Array_F[index]); 
 
    console.log("printOfferFrame "+Array_G[index]);//alert the image from the index provided by the index attribute 
 
}); 
 

 
function PrinOffer() { 
 
    ajax_Print(); 
 
}

.GameWinBrand_Container { 
 
    position: absolute; 
 
    top: 950px; 
 
    left: 286px; 
 
    height: 250px; 
 
    width: 500px; 
 
    overflow: hidden; 
 
} 
 
.GameWinBrand_innerScroll { 
 
    position: relative; 
 
    width: 480px; 
 
    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; 
 
} 
 
.BrandMenu { 
 
    background-color: #D3D3D3; 
 
    filter: alpha(opacity=98); 
 
    opacity: 0.98; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="GameWinBrand_Container"> 
 
    <div id="BrandWinlist" class="GameWinBrand_innerScroll"> 
 
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" > 
 
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" > 
 
    </div> 
 
</div> 
 

 
<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;"> 
 

 
    <button class="Print" onclick="PrintOffer()"></button> 
 
</div>