如何在javascript中从文档更改为“this”-解网

问：

我正在尝试在javascript中围绕原型进行研究，并习惯于它的价值。目前，我将其设置为.cf--modal，但是当我使用它来设置变量时，它似乎不起作用。由于这是我众多函数中的第一个，我真的不想点击文档，而是宁愿在模态切换函数中定位“this”。

如何更改 modal_toggle 函数，以便将 document.getElementById 和 document.getElementsByClassname 替换为 this.find 或类似的东西。

$(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)" class="modal-trigger">Contact Us</a>
<section class="cf">
  <div class="cf-container">
      <form>
    <div class="inner-container">
        <div class="cf-block">
          <div class="cf-label">First Name</div>
          
        </div>
        <div class="cf-block">
          <div class="cf-label">Last Name</div>
        </div>
        <div class="cf-block">
          <div class="cf-label">Email</div>
        </div>
        <div class="cf-block">
          <div class="cf-label">Message</div>
        </div>
        <div class="cf-block">
          <div class="cf-label">Submit</div>
        </div>
    </div>
      </form>
  </div>
</section>
<section class="cf--modal">
  <span class="close-cf-modal">close</span> 

</section>

javascript jquery 这个原型编程

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();
  });
}

如何在javascript中从文档更改为“this”

How to change from document to "this" in javascript

评论

评论