html页面代码1
html代码2
页面效果1-未点击“添加图文”
页面效果2-点击两次“添加图文”
js代码-点击“添加图文”的事件处理
js代码-点击“删除图文”的事件
页面效果3-点击“图文2”中的“删除该图文”效果
为了方便对比，点击了两次“添加图文”，并在每个图文内容里面的“图文详情链接”的输入框中填写了相对应的数字，这里需要注意的是，用js追加元素，点击事件是获取不到用js追加的内容的，查了好多资料，也试过好多方法，最后测试后发现这种方法是可行的。比如每个图文里面都有封面图，封面图那里有个长方形的框框，这个框框是点击“选择图片”按钮后选择了本地电脑的图片后，显示本地图片的路径的，因为这是js追加的元素，需要分两步进行。
“选择图片”左边的框框的事件如上图的最后一个方法
第一步，跟平时一样，直接用事件处理即可，这里处理的是原本页面就有的上传图片的，js追加的元素用不了
第二步，在js追加元素的代码里加上第一步的方法，这样才能用，如下图
在js追加元素的代码里加上第一步的方法，这样才能用
点击“删除该图文”时，直接用click触发事件，直接儿子找爷爷，再由爷爷干掉老爸是行不通的，即
var idVal = $(this).attr('idVal');
$(this).parents('.contents').find('#son_'+idVal).remove();
这样是找不到这个元素的老爸的，打印出来是空的
要先找到这个元素的老爸，然后在通过老爸找老爸的老爸，一层层找父类才找得到
js代码-找到该元素的父类，再通过父类找其父类，然后删除
网友评论