zoukankan      html  css  js  c++  java
  • 绑定弹窗事件最好的方法,原生JS和JQuery方法

    使用jQuery

    ui = {
            $close: $('.close')
          , $pop: $('.pop')
          , $topopBtn: $('.topop-btn')
          , $popbtnArea: $('.popbtn-area')
        };
    // 绑定打开弹窗
          ui.$popbtnArea.on('click','.topop-btn',function(){
          ui.$pop.eq($(this).index()).show();
          })
          // 关闭弹窗
          ui.$close.on('click',function(){
          ui.$pop.hide();
          });

    原生JS代码

    ui.$pop = document.getElementsByClassName('pop');
    ui.$topopBtn = document.getElementsByClassName('topop-btn');
    ui.$close = document.querySelectorAll('.close');
    
    for(var i=0;i<ui.$topopBtn.length;i++){
            ui.$topopBtn[i].index = i;
    }
          // 打开弹窗
          for(var i=0;i<ui.$topopBtn.length;i++){
            ui.$topopBtn[i].onclick = function(){
              ui.$pop[this.index].style.display = 'block';
            }
          }
          // close关闭弹窗
          for(var i=0;i<ui.$close.length;i++){
            ui.$close[i].onclick = function(){
              this.parentNode.style.display = 'none';
            }
          }

    有错误或者更好的方法欢迎评论

  • 相关阅读:
    周总结
    周总结
    周总结
    读后感
    周总结
    周总结
    周总结
    第一周总结
    大学生失物招领平台使用体验
    快速乘法+快速幂
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4261845.html
Copyright © 2011-2022 走看看