简单jQuery每个函数

Question

我有一个设置简单的codePen。我正在尝试获取适当的按钮以单击以显示适当的图像。我们有一个 'red box' 应该只显示第一张图片，还有一个 'green box' 应该只显示第二张图片。

我知道我可以通过简单的 javascript 点击来做到这一点——但是我会在页面上有很多方框，我想做一些 each 循环来知道我在哪个方块单击以显示与该方块关联的正确图像。

我该如何正确设置它，以便我可以通过单击功能知道我单击了哪个方块以显示正确的图像？我为每个图像添加了一些 'data' 属性，我想也许我可以用 each 函数以某种方式引用它......我只是不确定该怎么做！

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

我希望这能回答您的问题或至少对您有所帮助。

简单jQuery每个函数

Simple jQuery Each Function

jquery

function

each

gsap