无法附加元素

Question

我设置了 2 个图像容器，它显示了从元素数组中随机生成的 2 个图像。当用户单击 2 个随机生成的图像中的任何一个时，将出现一个图像弹出窗口。此生成的图像弹出窗口；从第二个图像数组中，与已显示的随机生成的图像有关。

因此，这是正确的行为： - 随机生成的图片A和图片B显示在页面1中，当用户点击图片A时，会弹出图片A1，否则点击图片B时会弹出图片B1。

问题：

我已经成功实现了以下目标：

1.) 从数组 A 中随机生成 2 个图像并将其附加到初始的 2 个图像容器中

2.) 将数组 B 链接到数组 A 中生成的项目

我已经设置了一个控制台日志，并且能够看到当我从数组 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 标记的 src 属性，

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);
}