Question

我有一个小图片列表，同时点击它们应该显示在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>

Answer 1

你试过吗？

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

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

  });

});

Answer 2

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

A great example here

Another example here

您可以使用此插件，或至少使用它来获取灵感来编写自己的插件。

Answer 3

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

希望它有所帮助。

Answer 4

你错过了$（这里（'＃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); });

});

EDIT添加了评论

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

4 个答案: