изображение не отображается, когда родитель изображение нажимают

Question

Функциональность:

Когда пользователь вводит первую страницу, первичные изображения случайным образом и отображается. Поэтому, когда пользователь нажимает на основное изображение (1-е изображение), будет отображаться вторичное изображение (второе изображение).

Вторичное изображение является расширением для 1-го изображения, поэтому, например, когда пользователь нажимает на первое изображение яблока, отображается второе изображение червя.

То, что я сделал:

Я поставил как 1-ые изображения и 2-го изображения в набор массива. Во-вторых, массив 1-го изображения рандомизирован, поэтому я установил второй массив изображения для добавления к 1-му рандомизированному изображению.

Я прикрепил следующий код для прочтения:

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

Выпуск:

Существует основной вопрос, который я в настоящее время сталкивается в данный момент

** Когда я нажал основное изображение, вторичное изображение вообще не отображается. Поэтому ни одно из изображений вторичного массива не добавляется к первому рандомизированному изображению. следовательно, вторичное изображение не отображается.

Я потерялся из-за того, что, возможно, пошло не так или нет. Пожалуйста, помогите.

Ваша помощь очень ценится.

Answer 1

Похоже, у вас есть ряд проблем, происходящих здесь, один использует обработчики встроенных кликов, что является просто плохой практикой, а другой - тем, что вы используете разные области функций и объявляете функции в области окна вне последовательности , Сказав, что, вот некоторые вещи, которые работали:

Вместо связывания вашего яваскрипта инлайн, попробуйте следующее:

Используйте тег данных на вашем йот элемент как data-brand="1":

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

Bind ваш Jquery к весь список в один ход:

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

также переместить определения функций в верхней части блока сценария, так что они определяются перед «йот реак dy ', поскольку вы объявляете их в пространстве имен окна как глобальные. Определение selectBrand как window.selectBrand и вызов его как window.selectBrand также может работать.

Впоследствии я столкнулся с ошибкой 'slideDuration is not a function', но это выходит за рамки этого вопроса.

Это jsFiddle я сделал, чтобы играть с этой проблемой: https://jsfiddle.net/TimOgilvy/n1L9ja7m/

Answer 2

я мог бы выяснить некоторые проблемы в вашем коде здесь

1. вы используете $('#Vivo_BrandDescription') но Vivo_BrandDiscription не является действительным ID, я думаю она должна быть BrandDiscription

2. в функции selectBrand(index) в следующем коде

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

3. рядный onclick="selectBrand('3');" в тегах изображения, я не знаю, почему, но он не работает для меня, так что я сделал это

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

после внесения этих изменений здесь является fiddle

I обновили скрипку, чтобы правильно получить изображения, возможно, это то, что вы хотели.