Question

我计划最终制作一个灯箱，但我想学习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>

我的Javascript：

$(document).ready(function () {

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

        });

感谢。

Answer 1

请将您的代码更新为

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

同时将你的CopiedTo改为copyTo，在这里查看工作jsfiddle http://jsfiddle.net/5AGmp/

Answer 2

您需要在点击处理程序中设置image，否则this将引用window，而不是点击的img元素。

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

Answer 3

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

http://jsfiddle.net/ueUwA/

<强> 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>

<强> jQuery的：

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

这是我从头开始编写的simple jQuery lightbox，它从缩略图周围的href值加载图像。

Answer 4

这里有工作的jsfiddle：http://jsfiddle.net/mrT7t/ 你刚刚遇到了CopiedTo选择器的问题。

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

});

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

4 个答案: