Question

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

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

问题：

我成功实现了以下目标：

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

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

我已经设置了一个控制台日志，当我从数组A中选择随机生成的图像时，能够看到第二个数组元素中的元素被正确调用

但是，此时，我无法将数组B中的项目附加到我的html正文中的图像弹出窗口中。

请帮忙

以下是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

Answer 1

如果您尝试在第二个设置图片网址以显示来自arrayB的优惠，您不想更改HTML，您想要设置img标记的src属性，< / p>

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

无法追加元素

1 个答案: