问题描述
|
我在单击每个小图像时都有一个小图像列表,它们应该显示在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>
解决方法
你有没有尝试过 ?
$(function() {
$(\'a img\').click(function() {
$img=$(this).attr(\'src\');
$(\'#div1\').append(\"<img src=\"+$img+\" />\")
});
});
, 我知道您的问题专门询问如何手动实现,但现有的插件可以为您完成大部分工作:
一个很好的例子。
这里的另一个例子。
您可以使用此插件,或者至少可以将其用作灵感来编写自己的插件。
, 你可以在这里看到这个现场演示
http://jsfiddle.net/chhameed/nWqcv/
希望能帮助到你 。
, 您缺少$(此处(\'#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); });
});
编辑添加评论