Как добавить изображение в div с помощью jQuery?

Question

У меня есть список маленьких изображений, при нажатии на каждое из которых они должны отображаться в div (идея состоит в том, чтобы видеть их побольше)1003 *

Вот код 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

Вы можете увидеть это живое демо прямо здесь http://jsfiddle.net/chhameed/nWqcv/

Надеюсь, это поможет.

Answer 3

Я знаю, что ваш вопрос специально задавался о том, как вручную добиться этого, но существуют существующие плагины, которые сделали бы большую часть этой работы за вас:

Отличный пример здесь .

Другой пример здесь .

Вы можете использовать этот плагин или, по крайней мере, использовать его для вдохновения, чтобы написать свой собственный.

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

});

ИЗМЕНИТЬ добавленные комментарии