How to change from document to "this" in javascript-CodePudding

I am trying to wrap my head around prototype in javascript as well as getting used to the value of this. Currently I have this set to .cf--modal but when I use this to set a variable it does not seem to work. As this is my first of many functions I really don't want to hit the document and would rather target "this" within the Modal Toggle function.

How can I change the modal_toggle function so that document.getElementById and document.getElementsByClassname can be replaced with this.find or something along those lines.

$(function(){
   $('.cf--modal').each(function(){
      let cf = new ContactForm($(this));
   });
});

var ContactForm = function(this$obj){
   this.$obj = this$obj;
   this.init();
}

ContactForm.prototype.init = function init(){
    this.modal_toggle();
};

ContactForm.prototype.modal_toggle = function modal_toggle(){
   let cfCTA = document.getElementsByClassName("modal-trigger")[0];
   let cfModal = document.getElementsByClassName("cf--modal")[0];
   let cfModalClose = document.getElementsByClassName("close-cf-modal")[0];
   cfCTA.onclick = function () {
      cfModal.style.display = "block";
   }
   cfModalClose.onclick = function(){
      cfModal.style.display = "none";
   }
}

.cf{
  width:1000px;
  margin:40px auto;
}
.inner-container{
  padding:12px 24px;
  border:1px solid grey;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cf-block{
  flex:1
}

/* Modal Styling */
.cf--modal{
  width:375px;
  height:200px;
  position:absolute;
  right:36px;
  bottom:0;
  border:1px solid grey;
  display:none;
}
  .close-cf-modal{
    cursor:pointer;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" >Contact Us</a>
<section >
  <div >
      <form>
    <div >
        <div >
          <div >First Name</div>
          
        </div>
        <div >
          <div >Last Name</div>
        </div>
        <div >
          <div >Email</div>
        </div>
        <div >
          <div >Message</div>
        </div>
        <div >
          <div >Submit</div>
        </div>
    </div>
      </form>
  </div>
</section>
<section >
  <span >close</span> 

</section>

CodePudding user response：

You should use this.$obj to refer to the modal element for the current ContactForm

ContactForm.prototype.modal_toggle = function modal_toggle() {
  let cfModal = this.$obj;
  let cfCTA = $(".modal-trigger");
  let cfModalClose = cfModal.find(".close-cf-modal");

  cfCTA.on("click", function() {
    cfModal.show();
  })
  cfModalClose.on("click", function() {
    cfModal.hide();
  });
}