Не удалось добавить элемент

Question

Я установил 2 контейнера изображений, которые показывают 2 случайно генерируемых изображения из массива элементов. Когда пользователь нажимает на одно из 2 случайно генерируемых изображений, появится всплывающее окно с изображением. Это сгенерированное изображение всплывающее; из второго массива изображения, относится к какому случайному сгенерированному изображению, которое было отображено.

Таким образом, это правильное поведение: - случайное сгенерированное изображение A и изображение B показаны на странице 1, когда пользователь нажимает на изображение A, изображение A1 будет показано другим изображением B1 будет отображаться, когда изображение B.

Выпуск:

мне удалось добиться следующего:

1.) случайным образом 2 изображения из массива A и добавить его к исходному 2 изображения контейнера

2 .) связать массив B с элементами, сгенерированными в массиве A

Я установил консольный журнал и смог увидеть, что элемент из второго массива элемент правильно называется, когда я выбрать случайным образом изображение из массива А

Однако на данный момент, я не могу добавить элемент из массива B к изображению всплывающего окна в моем HTML тела ..

Пожалуйста, помогите

Вот код:

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

 
var OfferArray = ["lib/img/Offer/A.png", "lib/img/Offer/B.png", "lib/img/Offer/C.png", "lib/img/Offer/D.png"]; 
 
var random_BrandIndex, selectedOffer; 
 

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

 
function selectBrand(flag) { 
 
    selectedOffer = OfferArray[random_BrandIndex]; 
 

 
    console.log("selectedOffer: " + selectedOffer); 
 

 
    $("#P_Description").html(selectedOffer); 
 
}

.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: #FFFFFF; 
 
    filter: alpha(opacity=80); 
 
    opacity: 0.8; 
 
}

<!-- The first page where 2 randomly generated images are shown--> 
 
<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> 
 

 
<!-- The second page that will show the image in relation to the image that has been clicked--> 
 

 
<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="P_Description" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;"> 
 

 
</div>

Answer 1

Если вы тр инь установить URL изображения во втором, чтобы показать предложение от arrayB, вы не хотите, чтобы изменить HTML, вы хотите установить атрибут ГКЗ IMG тега,

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

function selectBrand(flag) { 
// assuming this is a callback function for the event handler, $(this) would be the image that's clicked. 
    selectedOffer = $(this).attr('data-index'); 

    console.log("selectedOffer: " + selectedOffer); 

    $("#P_Description").attr('src',selectedOffer); 
}