如何使用 jQuery 在 div 中附加图像？答案

【问题标题】：How to append an image in div using jQuery?如何使用 jQuery 在 div 中附加图像？
【发布时间】：2011-09-14 14:13:43
【问题描述】：

我有一个小图像列表，点击每个小图像时，它们应该显示在 div 中（想法是让它们变大）

我使用了追加函数jQuery，但它不起作用

这里是 jQuery 代码：

$(function() {
    $('.selectable a img').click(function() {
    var img=$(this).attr('src');    
    alert(img);// this is what i get  data/100.jpg but it does not show up in div
    ('#div1').append('img');
  });

});

部分 CSS 代码：

 <ul> 
    <?php foreach ($cakeTypeService->getByTypeAndSubtype('stage', 'ROSE') as $cake) { ?>
     <li class="selectable" id="cakeType-<?= $cake->id ?>">
       <a href="?cakeType=<?php echo ($cake->id); ?>" title="Selecteer">
       <?php if ($cake == $order->cakeType){?><span class="checked"></span><?php } ?>
       <img src="data/<? echo $cake->id ?>.jpg" alt="" width="50" height="50" /></a>                                 
      </li>
     <?php } ?>
  </ul>

【问题讨论】：

标签： jquery css oop

【解决方案1】：

你可以在这里看到这个现场演示 http://jsfiddle.net/chhameed/nWqcv/

希望对您有所帮助。

【讨论】：

【解决方案2】：

你试过了吗？

$(function() {
    $('a img').click(function() {
    $img=$(this).attr('src');    

    $('#div1').append("<img src="+$img+" />")

  });

});

【讨论】：

你的例子以某种方式帮助了我，但如果我提醒 ($('#div1').append('') );那么我得到 [ object object] 不显示 div 内的 img
@Mary 因为它是一个对象。你想从 alert 中得到什么？如果你想在#div1 中使用 html 代码，你应该做 alert($('#div1').html());
嘿，Baris 等一下，不要去看我的 img 节目，在 div 旁边只显示一分钟然后就迷路了，因此我有这个代码 $("#div1 img:last-child").remove() ;在附加乐趣之前，但它不起作用请帮助
@Mary 请让我知道你到底想做什么？我不明白你上面的意思
你点击的图片消失了还是div里面的图片消失了？实际上，我运行了您的代码，但其中任何一个都没有发生。你想达到什么目的？

【解决方案3】：

你错过了一个 $ (here ('#div1')) 并用你附加的东西做了一些奇怪的事情（实际上你试图在页面上附加所有图像的集合。（用 $('img' 选择);

试试这个：

$(function() { 
$('.selectable a img').click(function() { 
var img=$(this);//img is the image clicked
//append the img to the div
$('#div1').append(img); });

});

编辑添加的 cmets

【讨论】：

【解决方案4】：

我知道您的问题专门询问了如何手动实现这一点，但是现有的插件可以为您完成大部分工作：

A great example here.

Another example here.

您可以使用这个插件，或者至少使用它来获得灵感来编写自己的插件。

【讨论】：