问题描述
我希望能够点击图片来显示/隐藏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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!