单击图像显示/隐藏div [英] show/hide div by clicking image

问题描述

我希望能够点击图片来显示/隐藏div（带文字）。我有一个图像工作，但我有多个图像需要切换文本。

I want to be able to click on images to show/hide a div (with text). I've got this working for one image, but I have multiple images that need to toggle text.

javascript代码

The javascript code

    $(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {
        $("slidingDiv").slideToggle();
    });

});

HTML：

<a href="#" class="show_hide"><img src="image.jpg"></a>
<div class="slidingDiv">
    <h2>Title</h2>
    <p>text</p>
</div>

这样可行，但它只适用于一个图像+ div。我想要第二个图像和div，但使用相同的 slidingDiv 类，然后单击第二个图像切换第二个div显然切换两个div。

So this works, but it only works for one image+div. I want to have a second image and div, but using the same slidingDiv class and then clicking the second image to toggle the second div obviously toggles both divs.

那么我怎样才能获得两个图像来切换自己的div，而不是在点击两个图像中的一个时同时切换两个div？

So how can I get two images to toggle their own div, instead of toggling both divs at the same time when clicking one of the two images?

推荐答案

试试这个：

$('.show_hide').click(function(e) {
    $(e.target).parent().next('.slidingDiv').slideToggle();
});

e.target 会给你来源点击事件的DOM元素。

e.target will give you the source DOM element for click event.

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