Простая jQuery Каждая функция

Question

У меня есть код, который имеет простую настройку. Я пытаюсь нажать соответствующую кнопку, чтобы открыть соответствующее изображение. У нас есть «красная коробка», которая должна показывать только 1-е изображение, и «зеленый ящик», который должен показывать только второе изображение.

Я знаю, что могу сделать это с помощью простых javascript-кликов - но у меня будет много ящиков на странице, и я хочу сделать какой-то цикл, который будет знать, на какой квадрат я нажал, чтобы открыть правильное изображение, связанное с этим квадратом.

Как я могу установить это правильно, чтобы у меня была одна функция щелчка, которая знает, какой квадрат я нажал, чтобы показать правильное изображение? Я добавил некоторые атрибуты данных для каждого изображения, думая, может быть, я могу ссылаться на это как-то с каждой функцией ... Я просто не совсем уверен, как это сделать!

Here's the codePen to see what I mean

//reveal the appropriate large image here with javascript. 
//Maybe I can use an array to choose the correct image? 
//But how will the click function know which one to reveal ? 
//Maybe an 'each' function can help, 
//but I'm not sure how to set that up properly... 

var correctImage = ["#img1", "#img2"]; 

$(".box").click(function(event) { 
    var largeImages = new TimelineMax(); 
    largeImages.set(correctImage, {css:{display: "block"}}) 
     .from(correctImage, 1, {autoAlpha:0, ease:Sine.easeOut}); 

}); 

// just a reset button here 
$(".reset").click(function(event) { 
    var largeImages2 = new TimelineMax(); 
    largeImages2.set(correctImage, {clearProps: "all"}); 

}); 

Answer 1

Это довольно просто. Я добавлю пример html ниже с javascript, чтобы продемонстрировать, как узнать, какая кнопка была нажата.

.my_image { 
    display: none; 
} 

<a class="my_button" data-id="1">Test button 1</a> 
<a class="my_button" data-id="2">Test button 2</a> 
<a class="my_button" data-id="3">Test button 3</a> 

<img class="my_image" data-id="1" src="http://blog.jelanieshop.com/wp-content/uploads/2012/07/girl-laughing.jpg" /> 
<img class="my_image" data-id="2" src="http://thumbs.dreamstime.com/x/laughing-girl-1938830.jpg" /> 
<img class="my_image" data-id="3" src="http://dailyplateofcrazy.com/wp-content/uploads/2014/09/Beautiful-Girl-Laughing.jpg" /> 

Волшебное:

$(".my_button").click(function(){ 
    $(".my_image[data-id="+$(this).attr("data-id")+"]").show(); 
}); 

Я надеюсь, что это ответ на ваш вопрос или, по крайней мере, поможет вам.