将一个图片源复制到另一个图片源的Jquery代码_Jquery_Html_Gallery_Lightbox_Photo Gallery

将一个图片源复制到另一个图片源的Jquery代码

jquery html

将一个图片源复制到另一个图片源的Jquery代码,jquery,html,gallery,lightbox,photo-gallery,Jquery,Html,Gallery,Lightbox,Photo Gallery,我计划最终制作一个lightbox，但我想学习如何使用javascript。我的目标是，当您单击其中一个图像时，它会将该图像源复制到id为“copiedTo”的div中我就是想不出我的代码是怎么错的。以下是html： <body> <div id="gallery"> <ul> <li> <img src="1.jpg"/> <

我计划最终制作一个lightbox，但我想学习如何使用javascript。我的目标是，当您单击其中一个图像时，它会将该图像源复制到id为“copiedTo”的div中

我就是想不出我的代码是怎么错的。以下是html：

<body>
    <div id="gallery">
        <ul>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
        </ul>
    </div>

    <div id="copiedTo"><img src="#"/></div>
</body>

谢谢。

您需要在单击处理程序中设置

图像

，否则

此

将引用

窗口

，而不是单击的

img

元素

$(document).ready(function () {
    $('#gallery ul img').click(function() {
        var image = $(this).attr('src');
        $('#CopiedTo img').attr('src', image);
    });
});

请将您的代码更新到

$(document).ready(function () {
     $('#gallery ul img').click(function() {
           var image = $(this).attr('src');
           $('#copiedTo img').attr('src', image);
     });
});

也可以将您的CopiedTo更改为CopiedTo，在此处选中working jsfiddle

我更倾向于复制图像，而不是在加载页面时加载没有源的图像标记。在某些浏览器上，看起来您缺少图像

HTML:

<ul>
    <li><img src="http://placehold.it/100x100/e74c3c/ffffff" alt="#" /></li>
    <li><img src="http://placehold.it/100x100/3498db/ffffff" alt="#" /></li>
</ul>
<div class="copied"></div>

$('img').on('click', function(){
    $('.copied').html($(this).parent().html());
});

下面是我从头开始编写的一个示例，它从缩略图周围的href值加载图像。

下面是正在工作的JSFIDLE：你刚才对复制到选择器有问题

<div id="copiedTo"><img id="img2" src="#"/></div> 

$(document).ready(function () {

        var image = $(this).attr('src');

        $('#gallery ul img').click(function() {
            var image = $(this).attr('src');
             $('#img2').attr('src', image);
        });

});


$（文档）.ready（函数（）{
var image=$（this.attr（'src'）；
$（“#图库ul img”）。单击（函数（）{
var image=$（this.attr（'src'）；
$（'img2'）.attr（'src'，image）；
});
});

这将为文档添加上下文，因此请在内部单击…尽管为什么我必须声明image变量两次？

<div id="copiedTo"><img id="img2" src="#"/></div> 

$(document).ready(function () {

        var image = $(this).attr('src');

        $('#gallery ul img').click(function() {
            var image = $(this).attr('src');
             $('#img2').attr('src', image);
        });

});