单击父图像时不显示图像

Image is not displayed when parent image is clicked

本文关键字：图像显示显示图单击更新时间：2023-09-26

功能：

当用户进入第一个页面时，主图像被随机显示。因此，当用户点击主图像（第一图像）时，将显示次图像（第二图像）。

第二图像是第一图像的扩展，因此，例如，当用户点击苹果的第一图像时，显示蠕虫的第二图像。

我所做的：

我已经将第一个图像和第二个图像都设置为一组阵列。第二，第一个图像的阵列是随机的，因此，我设置了第二个图像阵列以附加到第一个随机图像。

我附上了以下代码供您阅读：

//Brand Array
var BrandNameArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"];
//Corresponding Image Array
var OfferArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"];
$(function() {
  //Auto populate into brand container once randomised for each Brand image
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray));
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var 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();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array
});
//Choose Brand with popUp
function selectBrand(index) {
  $('#BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $("#All").hide();
  $("#Back").hide();
  $("#Beauty").hide();
  $("#Choose").hide();
  $("#Fashion").hide();
  var chosenBrandIndex = OfferArray[BrandNameArray];
  //Set option clicked to CSS change 
  $('#Description').attr('src', chosenBrandIndex);
  $('#Description').show();
}
function BrandDescription() {
  idleTime = 0;
  $("#border_page").fadeOut(function() {
    $("#BrandDescription").fadeIn();
  });
}

.menu {
  background-color: #FFFFFF;
  filter: alpha(opacity=90);
  opacity: 0.98;
}
.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
  <img id="Main" src="lib/img/PAGE03/Background.png" />
  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" autofocus src="lib/img/transparent.png">
  <div class="Container">
    <div id="list" class="innerScroll">
      <!--1st Row-->
      <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">
      <!--2nd Row-->
      <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
      <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
      <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
      <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">
      <!--3rd Row-->
      <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
      <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
      <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
      <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">
    </div>
  </div>
</div>
<div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=4;">
  <img id="Description" style="position:absolute; top:124px; left:534px;z-index=5;">
</div>

问题：

目前面临的主要问题

**当我单击主映像时，次映像根本没有显示。因此，没有第二阵列图像被附加到第一随机图像。因此不显示二次图像。

我对可能出了问题或失踪的事情感到困惑。请帮忙。

非常感谢你的帮助。

这里似乎有很多问题，一个是使用内联点击处理程序，这是一种糟糕的做法，另一个是您使用了不同的函数作用域，并且在窗口作用域上无序地声明函数。话虽如此，以下是一些行之有效的方法：

与其将javascript内联绑定，不如尝试以下操作：

在您的dom元素上使用数据标记，如data-brand="1":

<img id="Brand_1" data-brand="1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px">

将您的jQuery绑定到整个列表只需一步：

$('#list img').on('click', function(){
    var brandId = $(this).data('brand'));
    selectBrand(brandId);
})

还要将函数定义移动到脚本块的顶部，这样它们就在"dom ready"函数之前定义了，因为您在窗口命名空间中将它们声明为globals。将selectBrand定义为window.selectBrand，并将其称为window.seelectBrand也可以。

随后，我遇到了一个"slideDuration不是函数"错误，但这超出了这个问题的范围。

这是我为解决这个问题而制作的jsFiddle：https://jsfiddle.net/TimOgilvy/n1L9ja7m/

我可以在这里找出你的代码中的一些问题

您使用的是$('#Vivo_BrandDescription')，但Vivo_BrandDiscription不是有效的id，我认为应该是BrandDiscription

在以下代码中的函数selectBrand(index)中

$('#BrandDescription').fadeIn({
   duration: slideDuration, // <= this here slideDuration is undefined
   queue: false
});

在图像标签中内联onclick="selectBrand('3');"，我不知道为什么，但它对我不起作用，所以我做的是
```
$('#list').find('img').on('click', function(){
   return selectBrand(this.id.split('_')[1]);
});
```

在做出这些改变之后，这里是小提琴

我已经更新了小提琴以获得正确的图像，这可能是你想要的。