initの中で関数を追加する方法

Question

ちょうどjsを学び始めました。

オーバーレイをクリックすると、トグルクラスも有効になります。

最初のコードはウェブサイト上にオーバーレイを生成し、開いたらオーバーレイをクリックすると閉じます。

<script> 

init=()=>{ 
    //SELECT & BIND (CLICK) EVENT 
    document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init); 
} 
modal={ 
    overlay:{ 
     init:()=>{ 
      //CREATE OVERLAY 
      var overlay = document.createElement('overlay'); 
      overlay.id = 'welcomeDivs'; 
      //SET (CLICK) EVENT TO REMOVE ITSLEF 
      overlay.addEventListener('click',modal.overlay.remove); 

      //APPEND TO INTERFACE 
      document.body.appendChild(overlay); 

     }, 
     remove:(e)=>{ 
      //REMOVE ITSELF 
      e.target.parentNode.removeChild(e.target); 
     }  
    } 
} 

//ON DOCUMENT LOAD RUN INIT 
document.addEventListener('DOMContentLoaded',init); 

</script> 

私がしたいことは、本体またはオーバーレイをクリックすると、トグルクラスもクリックされます。

<script type="text/javascript"> 
$(function() { 
     $("#welcomeDivs").click(function() { 
      $(".parela").toggleClass('myClass'); 
     }); 
    }); 
</script> 

あなたはこのしてください

Answer 1

あなたのコードで私を助けることができますが正しいですが、あなたは間違った方法でそれを使用します。クリックイベントをnoneにバインドするためセレクタ

$(function() { 
     $("#welcomeDivs").click(function() { 
      $(".parela").toggleClass('myClass'); 
     }); 
    }); 

上記のコードでは、バインドイベントは存在しないコードにしようとしています。代わりに、あなたは

$(function() { 
     $('body').on('click',"#welcomeDivs",function(event) { 
      if($(event.target).attr('id')=='welcomeDivs') 
      { 
      $(".parela").toggleClass('myClass'); 
      } 
     }); 
    }); 

Answer 2

このコードを使用することができ、この

1. は、まずクリック機能を適用し、その後、本体に追加してみます。
2. だけあなたがFinalyにconsole.log

に parelaの outerHTMLを参照してくださいボディ

にオーバーレイを参照してくださいとjQuery

のon()機能をクリックしてイベントを使用して適用することができtag.Then重ねるために、いくつかのinnerHTMLを追加します。

$(function() { 
 
     $(document).on('click','#welcomeDivs',function() { 
 
      $(".parela").toggleClass('myClass'); 
 
      console.log($(".parela")[0].outerHTML) 
 
     }); 
 
    }); 
 
    
 
    init=()=>{ document.querySelector('a.menuToggle').addEventListener('click',modal.overlay.init); 
 
} 
 
modal={ 
 
    overlay:{ 
 
     init:()=>{ 
 
      var overlay = document.createElement('overlay'); 
 
      overlay.id = 'welcomeDivs'; 
 
      overlay.innerHTML ="i m overlay text" 
 
      document.body.appendChild(overlay); 
 
      overlay.addEventListener('click',modal.overlay.remove); 
 

 
     }, 
 
     remove:(e)=>{ 
 
      e.target.parentNode.removeChild(e.target); 
 
     }  
 
    } 
 
} 
 

 
//ON DOCUMENT LOAD RUN INIT 
 
document.addEventListener('DOMContentLoaded',init);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="menuToggle">click</a> 
 
<p class="parela">i m a parela</p>