点击图片放大或者是原图，再点击恢复
0
悬赏园豆：5
[已解决问题]
解决于 2016-06-16 10:17
麻烦帮忙看一下：我这个是获取多张图片。然后我想要的效果是点击一下放大或者是显示原图。然后再点击一下就恢复默认的就可以了。代码如下：
function ImageDataItemProc(id,data){
var html="";
if (data.flag == 1){
//var html = "<div class='imgslides'>";
var html="";
var remarkHtml = "";
if (data.remark != null && data.remark != "")
remarkHtml = "    <span style='color:red;'>(备注：" + data.remark + ")</span>";
//html+="<div style='border:1px solid red;weith:400px;height:500px;'>";
$.each(data.urls, function(idx, item){
var items=new Array();
items=item.split(";");
for (var i = 1; i < items.length; i++) {
// html+="<div><img style='weith:100px;height:80px; float:right;' src=FileServlet?id="+items[1]+"></div>";
html += "<div id='sid' style='border:1px solid #6666FF;margin-bottom:20px;'><img id='img1' style='height:330px;width:100px;' src=FileServlet?id="+items[i]+"></div>";
}
});
return html;
}
}
最佳答案
0
你的問題是？
收获园豆：5
$.each(data.urls, function(idx, item){
var items=new Array();
items=item.split(";");
for (var i = 1; i < items.length; i++) {
html += "<div id='sid' style='border:1px solid #6666FF;margin-bottom:20px;'><img id='img1' style='height:330px;width:100px;' src=FileServlet?id="+items[i]+"></div>";
}
});
这个是我获取多张图片的一段代码。现在我想的就是点击某张图片然后放大或者是显示原图，我不知道怎么显示。。 这个是在js里面拼的html
@时刻保持:
你該對圖片設定click事件控制放大及收合，跟你拼html沒關係
@RosonJ: 我在这个funciton里的那个for循环中添加了
$(document).ready(function(){
$("#"+id).click(function(){
alert("ad");
});
});
}
但是我监听不到，没有alert显示，是不是哪里有问题呢
@时刻保持:
動態產生的html不會被監聽到
$(document).on('click', '#' + id, function() {
//...
})
要用上面
@RosonJ: 这样做并不止监听到我点击的一个，而是监听到了全部。好像这样也不能满足
@时刻保持:
不能滿足是指？
@RosonJ: 恩，我监听了 应该怎么样显示原图呢，或者放大。。。麻烦了。刚刚的能监听到我点击的那张图片。嘻嘻
@时刻保持:
建議隱藏一個區塊(<div><img src=""></div>)，點擊後顯示該區塊並設定img的src屬性，
關閉的方式可以選擇放個關閉的按鈕或是再次點擊該區塊即關閉
p.s. 區塊的大小位置樣式就不提了
@RosonJ: 您能给我写一下吗，不用按钮那种方式，我对这个不太懂。原谅我这个小白
@时刻保持:
sorry. 手邊有事，推薦你個插件吧
http://malsup.com/jquery/block/#demos
