井井客

搜索

利用DOMNodeInserted监听元素子节点个数变化竟然也有效!

之前在事件处理这块写的不多,第一次用到DOMNodeInserted监听元素子节点变化,本来报着试度的态度,没想到真成功了。

利用DOMNodeInserted监听元素子节点个数变化竟然也有效!

测试提的一个小需求:本来页面上有一个上传图片的按钮,且只可以上传4张图,当上传完4张后,将按钮隐藏,这是其一,而当保存这4张图之后,再次打开该页面,需要将它隐藏。

这个上传的插件之前不是我经手的,虽然知道理论上怎么修改,但最后我还是重新写了一个JQ代码,其中用到的DOMNodeInserted是Js原生的一个事件。

思路就是(1)打开页面时查看节点数,如果超出则隐藏;(2)监听元素子节点变化的事件,当有变化时判断节点数是否超出再进行隐藏或隐藏。

因为监听元素子节点变化,有可能是删除节点(删除已上传图片),或者加节点,所以用DOMNodeInserted初时还有点惴惴的,但是测试了一下,竟然成功了。GOOD!

稍微贴一下代码,写的不好,勿见怪~

function hideUpload(num){
    var $fileList = $('.filelist');
    if($fileList.children('li').length > num) $('.filelist .btnWrap').hide();
    $fileList.bind('DOMNodeInserted',function(){
        if($(this).children('li').length > num){
            $(this).find('.btnWrap').hide();
        }else{
            $(this).find('.btnWrap').show();
        }
    });
}
hideUpload(2);//在此输入限止上传个数

考虑到是多页面使用同一个插件,但是上传个数并不相同,所以封装成了一个函数,并传参-限止数(num)。

与DOMNodeInserted类似的一个事件则是DOMNodeRemoved,看名字已经差不多知道一个是插件节点,一个是删除节点了。有兴趣可以百度一下~

文章TAG:js

作者:井井客整理来源:未知
本文标题:利用DOMNodeInserted监听元素子节点个数变化竟然也有效!
本文链接:http://www.jingjingke.com/c/25146.html

上一篇:Bash命令(文件目录操作)及快捷键整理
下一篇:iconfont图标字体配合伪元素

文章分类

相关阅读

随便看看