jQuery 单击时显示特定图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18708439/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show a specific image on click
提问by Langkiller
I am trying to get a div to show when a picture is clicked. This div should contain the clicked picture only larger. I can't get this to work though. I've tried a lot of different things and now I hope someone can help me out or give me some pointers.
我试图让一个 div 在点击图片时显示。这个 div 应该只包含更大的点击图片。虽然我无法让它工作。我尝试了很多不同的事情，现在我希望有人可以帮助我或给我一些指示。
First I have my html image, which is generated in a php while loop:
首先，我有我的 html 图像，它是在 php while 循环中生成的：
<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
Then I have my CSS for the div I want to be shown on click of the previous image:
然后我有我想要在点击上一张图片时显示的 div 的 CSS：
#showimagediv {
display: none;
width: 500px;
height: 500px;
margin-left: 100px;
margin-top: -300px;
position: fixed;
background-color: #f00;
z-index: 6;
}
And last I have some Jquery code I tried to make:
最后，我尝试编写一些 Jquery 代码：
<script>
$(document).ready(function() {
$(\"#gallerythumbnail\").click(function( event ) {
$(\".showimagediv\").show();
});
});
</script>
I know I can get the address of the clicked image be using this line:
我知道我可以使用这一行获得点击图像的地址：
$(this).attr('src')
I don't know how to use it in a div, shown when an image is clicked
我不知道如何在 div 中使用它，单击图像时显示
I hope someone understands what I mean and can help me in the right direction.
我希望有人理解我的意思，并能在正确的方向上帮助我。
回答by adeneo
Get the source from the thumbnail and create a new image to be inserted into the DIV where you're trying to display the clicked image :
从缩略图获取源并创建一个新图像以插入到您尝试显示单击图像的 DIV 中：
$(document).ready(function() {
$('.gallerythumbnail').on('click', function() {
var img = $('<img />', {
src : this.src,
'class' : 'fullImage'
});
$('.showimagediv').html(img).show();
});
});
回答by Roko C. Buljan
Then I have my css for the div I want to be showed on click of the previousimage
然后我有我想要在点击上一张图片时显示的 div 的 css
if it's correct what you said, previous oneis the image, that means the DIV is .next()to it!
如果你说的是对的，上一张是图片，这意味着DIV是.next()对的！
use class for your DIV in your CSS:
在CSS 中为 DIV 使用类：
.showimagediv {
jQuery
jQuery
$(function() { // DOM ready shorthand
$(".gallerythumbnail").click(function() {
$(this).next('.showimagediv').show(); // or you want .toggle() ?
});
});
回答by Edson Horacio Junior
First of all, your CSS code #showimagediv. #stands for ID attribute.
Your jQuery code uses .showimagediv. .stands for CLASS attribute.
首先，你的 CSS 代码#showimagediv。#代表 ID 属性。您的 jQuery 代码使用.showimagediv. . 代表 CLASS 属性。
So first thing you should decide wether that showimagediv is an ID or a DIV and than correct your CSS or your jQuery.
所以首先你应该决定 showimagediv 是一个 ID 还是一个 DIV，而不是更正你的 CSS 或你的 jQuery。
Than, put your img tag inside a so it becomes 'clickable'. href="#" means nothing will happen when you click it.
然后，将您的 img 标签放在 a 中，使其变为“可点击”。href="#" 表示单击它时不会发生任何事情。
<a href="#" id="image">
<img src='".$picsarray[$picsfrom]."' class='gallerythumbnail'>
</a>
And change your jQuery function to this (use div.showimagediv if it is a class attribute or div#showimagediv if it is an id attribute):
并将您的 jQuery 函数更改为此（如果它是类属性，则使用 div.showimagediv 或 div#showimagediv 如果它是 id 属性）：
$(function() {
$("a#image").click(function() {
$("div.showimagediv").css("display", "block");
});
});
So when you click the image inside the link, it will change the display value from noneto block. This will not toggle, it will show once and not hide again.
因此，当您单击链接内的图像时，它会将显示值从none更改为block。这不会切换，它会显示一次，不会再次隐藏。
If you need to toggle you need to control that inside the jQuery function, like this:
如果需要切换，则需要在 jQuery 函数中控制它，如下所示：
$(function() {
$("a#image").click(function() {
var actualDivDisplay = $("div.showimagediv").css("display");
var newDivDisplay = "";
if (actualDivDisplay == "none") {
newDivDisplay = "block";
} else {
newDivDisplay = "none";
}
$("div.showimagediv").css("display", newDivDisplay);
});
});
