在html页面，点击删除一个元素

admin

源码：

1. var img = '';
   
2. var localIds;
   
3. var imgIds = [];    //所有图片localId
   
4. $('.add_img', page).click(function () {
   
5.     var t = this;
   
6.     if (window.sysinfo.container == 'wechat') {
   
7.         wx.chooseImage({
   
8.             count: 1, // 默认9
   
9.             sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
   
10.             sourceType: [/*'album', */'camera'], // 可以指定来源是相册还是相机，默认二者都有
    
11.             success: function (res) {
    
12.                 localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    
13.                 if ($.isArray(localIds) && res.errMsg =='chooseImage:ok') {
    
14.                     $.each(localIds,function(key, localId) {//取出每个localIds
    
15.                         if (imgIds.length >= 5) {
    
16.                             $.toast('评论图片数不能超过5张');
    
17.                         } else {
    
18.                             imgIds.push(localId);
    
19.                             if (localId != '') {
    
20.                                 img += '<div class="col-33">';
    
21.                                 img += '<span class="iconfont font9 del_img"></span>';
    
22.                                 img += '<img class="card-cover" src="'+localId+'">';
    
23.                                 img += '</div>';
    
24.                             }
    
25.                         }
    
26.                     });
    
27.                     $('.img_list', page).html(img);
    
28.                     //删除图片
    
29.                     $('.del_img', page).click(function(){
    
30.                         $(this).parent().remove();
    
31.                         var id = $(this).next().attr('src');
    
32.                         var pos = -1;
    
33.                         for (var i=0; i<imgIds.length; i++) {
    
34.                             if (imgIds[i] == id) {
    
35.                                 pos = i;
    
36.                                 break;
    
37.                             }
    
38.                         }
    
39.                         if (pos > -1) {
    
40.                             imgIds.splice(pos, 1);
    
41.                         }
    
42.                     });
    
43.                 } else {
    
44.                     $.toast('上传出错');
    
45.                 }
    
46.             }
    
47.         });
    
48.     } else {
    
49.         $.toast('请在微信中上传图片');
    
50.     }
    
51. });

复制代码

1. var imgIds = [];        //定义imgIds为一个数组
   
2. var imgIds = {};        //定义imgIds为一个对象

复制代码

1. $('.add_img', page).click(function () {                //绑定（找到）页面元素 class = ‘add_img’,在这个页面，执行点击事件

复制代码

1. imgIds.push(localId);   //方法可向数组的末尾添加一个或多个元素，并返回新的长度

复制代码

1. img += '<div class="col-33">';
   
2.                                 img += '<span class="iconfont font9 del_img">xxx</span>';
   
3.                                 img += '<img class="card-cover" src="'+localId+'">';
   
4.                                 img += '</div>';//将html 统统押进img中

复制代码

1. $('.img_list', page).html(img);<span class="Apple-tab-span" style="white-space:pre">                </span>//在html页面中 class=‘img_list’ 下面，将上一步html页面展示出来

复制代码

1. $('.del_img', page).click(function(){        //找到html页面中.del_img所处的位置，执行点击函数（删除事件）

复制代码

1. $(this).parent().remove();                //将当前元素（.del_img）的父元素（'<div class="col-33">'）做包裹的所有html元素移除

复制代码

1. var id = $(this).next().attr('src');        //定义id 为 当前元素（del_img）的下一个元素（img）的属性为src的值（localId）

复制代码

1. var pos = -1;   //初始化选中的（将要删除）为 第‘-1’个

复制代码

1. for (var i=0; i<imgIds.length; i++) {        //开始循环， 当i<5的时候停止循环 imgIds 在上文中定义为5
   
2.     if (imgIds[i] == id) {        //当循环到第i个 = 已删除的图片的id的时候
   
3.         pos = i;        //取出他的键值（为第几个）
   
4.         break;        //跳出循环
   
5.     }
   
6. }

复制代码

1. if (pos > -1) {        //如果取出键值成功
   
2.     imgIds.splice(pos, 1);        //从数组中图片为改ID的图片
   
3. }

复制代码