Vanillla Javascript使用数据类型显示隐藏内容

Question

我不确定我的方法是否正确，但希望是正确的。我有不同的部分，可以在结帐过程中编辑。因此，如果客户端单击相关部分的编辑按钮，它应该隐藏信息部分，然后显示编辑部分。我的想法是使用数据类型，因为试图尽可能保持javascript的干燥？所以这就是我所拥有的，但不确定如何接近它。

其思想是单击以获取所单击的编辑按钮的数据类型，并将其与要显示的部分的id相匹配，然后向其添加一个show类。我让它工作了，但最初，我必须双击才能启动它，如果我做了一个控制台日志，“点击”计数会呈指数级攀升。

还有，觉得有两个功能是重复的吗？

​

function editDetails() {

  let trigger = document.querySelectorAll('.edit-link');

  trigger.forEach(function(click) {
    click.addEventListener('click', function(e) {

      const target = this.getAttribute('data-checkout');
      const checkoutSection = document.getElementById('checkout-' + target);
      const checkoutEditSection = document.getElementById('edit-checkout-' + target);

      if (checkoutEditSection.classList) {
        checkoutEditSection.classList.add('show');
      }
      if (checkoutSection.classList) {
        checkoutSection.classList.add('hide');
      }

      e.preventDefault();
    })


  });
}

function cancelDetails() {

  let trigger = document.querySelectorAll('.btn-cancel');

  trigger.forEach(function(click) {
    click.addEventListener('click', function(e) {

      const target = this.getAttribute('data-checkout');
      const checkoutSection = document.getElementById('checkout-' + target);
      const checkoutEditSection = document.getElementById('edit-checkout-' + target);

      if (checkoutEditSection.classList) {
        checkoutEditSection.classList.remove('show');
      }
      if (checkoutSection.classList) {
        checkoutSection.classList.remove('hide');
      }

      console.log(target);
      e.preventDefault();
    })
  });
}

.edit-link {
  display: inline-flex;
  padding: 1rem 2rem;
  color: white;
  background: blue;
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.info {
  padding: 4em;
  background: lightcoral;
  margin-bottom: 1rem;
  display: block;
}

.details {
  padding: 4em;
  background: #e7e7e7;
  margin-bottom: 1rem;
  display: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.btn {
  display: inline-flex;
  padding: 1em 2em;
  color: white;
  background: black;
  text-decoration: none;
}

<div class="container container--lg">

  <a onclick="editDetails()" data-checkout="personal" class="edit-link">Edit Personal Details</a>
  <a onclick="editDetails()" data-checkout="payment" class="edit-link">Edit Payment Details</a>

  <div id="checkout-personal" class="contact-info info">this is the Personal Details content</div>
  <div id="edit-checkout-personal" class="contact-info details">
    this is the Personal Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="personal" onclick="cancelDetails()">cancel</a>
    <a class="btn" onclick="saveDetails()">Save</a>

  </div>
  <div id="checkout-payment" class="payment-info info">this is the Payment Details content</div>
  <div id="edit-checkout-payment" class="payment-info details">this is the Payment Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="payment" onclick="cancelDetails()">cancel</a>
    <a class="btn" onclick="saveDetails()">Save</a></div>

</div>

​

Answer 1

每次单击editDetails时，您都会在所有“.edit-link”的单击中添加一个函数--您只需添加一次该函数并将其添加到静态容器中，然后在容器上的任何单击都会显示e.target中的目标

像这样委派

​

document.querySelector(".container").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit-link") || tgt.classList.contains("btn-cancel")) {
    e.preventDefault();
    const cancel = tgt.classList.contains("btn-cancel");
    const target = tgt.getAttribute('data-checkout');
    const checkoutSection = document.getElementById('checkout-' + target);
    const checkoutEditSection = document.getElementById('edit-checkout-' + target);

    checkoutEditSection.classList.toggle('show', !cancel);
    checkoutSection.classList.toggle('hide', cancel);
  }
})

.edit-link {
  display: inline-flex;
  padding: 1rem 2rem;
  color: white;
  background: blue;
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.info {
  padding: 4em;
  background: lightcoral;
  margin-bottom: 1rem;
  display: block;
}

.details {
  padding: 4em;
  background: #e7e7e7;
  margin-bottom: 1rem;
  display: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.btn {
  display: inline-flex;
  padding: 1em 2em;
  color: white;
  background: black;
  text-decoration: none;
}

<div class="container container--lg">

  <a data-checkout="personal" class="edit-link">Edit Personal Details</a>
  <a data-checkout="payment" class="edit-link">Edit Payment Details</a>

  <div id="checkout-personal" class="contact-info info">
    this is the Personal Details content
  </div>
  <div id="edit-checkout-personal" class="contact-info details">
    this is the Personal Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="personal">cancel</a>
    <a class="btn" onclick="saveDetails()">Save</a>
  </div>
  <div id="checkout-payment" class="payment-info info">
    this is the Payment Details content
  </div>
  <div id="edit-checkout-payment" class="payment-info details">
    this is the Payment Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="payment">cancel</a>
    <a class="btn" onclick="saveDetails()">Save</a>
  </div>
</div>

​

Answer 2

不确定您的所有需求，但在这里我将展示如何为每个按钮添加事件处理程序，并调用一个函数来简单地切换hide类。

您对按钮的其他工作可以适当地放在函数中；

​

function showAction(text) {
  const showMe = document.getElementById('showme');
  showMe.textContent = text;
}

function clickEventhandler(event) {
  showAction('Clicked:' + this.textContent)
  const target = this.getAttribute('data-checkout');
  const checkoutSection = document.getElementById('checkout-' + target);
  const checkoutEditSection = document.getElementById('edit-checkout-' + target);
  checkoutSection.classList.toggle('hide');
  checkoutEditSection.classList.toggle('hide');
  event.preventDefault();
}

function saveEventHandler(event) {
  showAction('Clicked:' + this.textContent);
  clickEventhandler.call(this, event);
}

function cancelEventHandler(event) {
  showAction('Clicked:' + this.textContent);
  clickEventhandler.call(this, event);
}

function cancelEventHandler(event) {
  showAction('Clicked:' + this.textContent);
  clickEventhandler.call(this, event);
}

document.querySelectorAll('.edit-link')
  .forEach(function(element) {
    element.addEventListener('click', clickEventhandler);
  });
document.querySelectorAll('.btn-cancel')
  .forEach(function(element) {
    element.addEventListener('click', cancelEventHandler);
  });
document.querySelectorAll(".save-details")
  .forEach(function(element) {
    element.addEventListener('click', saveEventHandler);
  });

.edit-link {
  display: inline-flex;
  padding: 1rem 2rem;
  color: white;
  background: blue;
  margin-bottom: 2rem;
  margin-right: 1rem;
}

.info {
  padding: 4em;
  background: lightcoral;
  margin-bottom: 1rem;
}

.details {
  padding: 4em;
  background: #e7e7e7;
  margin-bottom: 1rem;
}

.hide {
  display: none;
}

.btn {
  display: inline-flex;
  padding: 1em 2em;
  color: white;
  background: black;
  text-decoration: none;
}

#showMe {
  border solid lime 1px;
}

<div class="container container--lg">
  <a data-checkout="personal" class="edit-link">Edit Personal Details</a>
  <a data-checkout="payment" class="edit-link">Edit Payment Details</a>
  <div id="checkout-personal" class="contact-info info ">this is the Personal Details content</div>
  <div id="edit-checkout-personal" class="contact-info details hide">
    this is the Personal Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="personal">cancel</a>
    <a class="btn save-details" data-checkout="personal">Save</a>
  </div>
  <div id="checkout-payment" class="payment-info info">this is the Payment Details content</div>
  <div id="edit-checkout-payment" class="payment-info details hide">this is the Payment Details content in <b>Edit mode</b>
    <a class="btn btn-cancel" data-checkout="payment">cancel</a>
    <a class="btn save-details" data-checkout="payment">Save</a></div>
</div>
<div id="showme"></div>

​