单击父图像时不显示图像 [英] Image is not displayed when parent image is clicked

查看：83
本文介绍了单击父图像时不显示图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

功能：

Functionality:

当用户进入第一页时，主图像会随机显示。因此，当用户点击主图像（第1张图像）时，将显示次要图像（第2张图像）。

When user enters the first page, the primary images are randomised and displayed. Therefore, when user clicks on the primary image (1st image), a secondary image (a 2nd image) will be displayed.

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

The secondary image is an extension to the 1st image, therefore, for e.g, when a user clicks on the 1st image of an apple, the second image of a worm is displayed.

什么我已经完成了：

What I have done:

我已将第1张图像和第2张图像都设置为一组数组。其次，第一个图像的数组是随机的，因此，我已将第二个图像阵列设置为附加到第一个随机图像。

I have set both the 1st images and 2nd images into a set of an array. Secondly, the array of 1st image is randomised, hence, I have set the 2nd array of image to append to the 1st randomised image.

我附上了以下代码：你的细读：

I have attached the following code for your perusal:

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

问题：

Issue:

我目前面临的主要问题是

There is the main issue that I am currently facing at the moment

**当我点击主图像时，未显示次要图像一点都不因此，没有二次阵列图像被附加到第一随机化图像。因此，不会显示次要图像。

**When I clicked on the primary image, the secondary image is not being displayed at all. Therefore, none of the secondary array image is appended to the first randomised image. hence, the secondary image is not displayed.

我在可能出错或丢失的情况下迷失了。
请帮助。

I am lost at what could have possibly gone wrong or missing. Please help.

非常感谢您的帮助。

推荐答案

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

I could figure out some problems in your code here


  1. 你正在使用 $（'＃Vivo_BrandDescription '）但是 Vivo_BrandDiscription 是无效的ID，我认为它应该是 BrandDiscription

  2. 在函数 selectBrand（index）中，代码如下

  1. you are using $('#Vivo_BrandDescription') but Vivo_BrandDiscription is not valid id, i think it should be BrandDiscription

  2. In function selectBrand(index) in the following code

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


  • 内联 onclick =selectBrand（'3'）; 在图片标签中，我不知道为什么，但它不适合我，所以我做的是

  • inline onclick="selectBrand('3');" in image tags, I don't know why but its not working for me so what I did is 

    $('#list').find('img').on('click', function(){
   return selectBrand(this.id.split('_')[1]);
});


    • 在此处进行这些更改后，小提琴

    after making these changes here is the fiddle

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

    I have updated the fiddle to get the images properly may be this is what you wanted.

    这篇关于单击父图像时不显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆