改变innerHTML

Question

我试图改变一个页面的innerHTML两次，更多的解释，我试图做一个单一的页面，如应用程序。我是新手。我想在一次单击后更改该部分的内部HTML内容，然后获取更改后的内部HTML的classList，然后再次更改它，但它似乎不起作用，我不知道我做错了什么。

​

​

我对代码的思考过程如下

1. 选择整个容器，它是特性容器。
2. 单击时，更改容器innerHTML
3. 在单击已更改的容器innerHTML时，再次更改内部innerHTML，但它不起作用，它一直给我第一个innerHTML，但是当我不显示工作的主容器时，如何解决这个问题？

​

const hold = document.querySelector('#features');
const holds = document.querySelector('.features');

let hel;
hold.addEventListener('click', function() {
  holds.innerHTML = `<div class="ddd">h is here </div>`;

  // const self = this;
  hel = document.querySelector('.ddd');
  // console.log(hel.innerText);
  hel.addEventListener('click', function() {
    // holds.style.display = 'none';
    // this.style.display = 'none';
    holds.innerHTML = '<div class="q">mess</div>';
    console.log(this);
  });
});

<section id="features" class="features section-hidden">
  <div class="container container-pal1">
    <h2 class="features-description highlight">Features</h2>
    <div class="features-contain">
      <div class="features-text">
        <h3 class="features-header">
          We are here to provide you with the
          <span class="features-highlight">Best</span> services
        </h3>
        <p class="features-title">
          Everything you need in a modern bank and more, get on our waiting list today by clicking the button below
        </p>
        <a href="" class="hero-cta-1 features-button">View our services <img src="./assets/arrow-right.svg" alt="" />
                </a>
      </div>
      <div class="features-props">
        <div class="features-list">
          <div class="features-item">
            <img src="./assets/fast-delivery.svg" alt="" />
            <h5>Swift Delivery </h5>
            <p>No late transfer, get it instantly</p>
          </div>
          <div class="features-item">
            <img src="./assets/0-fees.svg" alt="" />
            <h5>$0 Fee's</h5>
            <p>No fees on your account like the other banks</p>
          </div>
          <div class="features-item">
            <img src="./assets//0-interest.svg" alt="" />
            <h5>Interest &percnt;</h5>
            <p>
              Interest when applying for loans depends on your agreement from the bank
            </p>
          </div>
          <div class="features-item">
            <img src="./assets/no-credit-check.svg" alt="" />
            <h5>Credit Card</h5>
            <p>Credit cards available at your demand</p>
          </div>
          <div class="features-item">
            <img src="./assets/chat-support.svg" alt="" />
            <h5>Chat Support</h5>
            <p>Chat with a company representative anytime</p>
          </div>
          <div class="features-item">
            <img src="./assets/fixed-payment-option.svg" alt="" />
            <h5>Fixed Payment Option</h5>
            <p>Payment Options will be provided</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

​

Answer 1

下面是一个简单的示例，说明如何切换DOM中已经存在的元素。

使用data-*属性引用要显示的所需ID元素。

使用classList.toggle切换元素。

​

const ELS_pages = document.querySelectorAll(".page");
const ELS_buttons = document.querySelectorAll("[data-page]");
const goToPage = (id) => {
  ELS_pages.forEach(EL => EL.classList.toggle("u-none", EL.id !== id));
};

ELS_buttons.forEach(EL => EL.addEventListener("click", () => {
  goToPage(EL.dataset.page);
}));

nav {display: flex;} nav a {color: #00f; padding: 5px 10px; cursor: pointer; }
/* Utility classes */
.u-none {display: none;}

<div class="page" id="page-login">
  <h1>Welcome</h1>
  <button type="button" data-page="page-main">ENTER</button>
</div>

<div class="page u-none" id="page-main">
   <nav>
     <a data-page="page-settings">User Settings</a>
     <a data-page="page-login">Logout</a>
   </nav>
   <h1>MAIN PAGE</h1>
</div>

<div class="page u-none" id="page-settings">
   <nav>
     <a data-page="page-main">Back to Main</a>
     <a data-page="page-login">Logout</a>
   </nav>
   <h1>SETTINGS PAGE</h1>
</div>

​

这是基本的，并且不会更改浏览器中的URI地址。为了实现这一点，应该添加更多的代码来处理这种情况。

Answer 2

尝试保留一个标志(如果只有两个不同的数据要显示)，并基于标志显示数据或计数器

const hold = document.querySelector('#features');
let count = 0;

hold.addEventListener('click', function() {
  switch (count){
    case 0:
      holds.innerHTML = `<div class="ddd">h is here </div>`;
    case 1:
      holds.innerHTML = `<div class="ddd">now some other is here </div>`
  };
});

请提供更多关于剩余答案的信息。

Answer 3

只需在下一次使用innerHTML重新绘制之后运行第二个requestAnimationFrame代码就可以了。

const hold = document.querySelector("#features");
const holds = document.querySelector(".features");

let hel;
hold.addEventListener("click", function (e) {
  e.preventDefault();
  holds.innerHTML = `<div class="ddd">h is here </div>`;

  // const self = this;
  hel = document.querySelector(".ddd");
  // console.log(hel.innerText);
  hel.addEventListener("click", function () {
    // holds.style.display = 'none';
    // this.style.display = 'none';
    requestAnimationFrame(() => {
      holds.innerHTML = '<div class="q">mess</div>';
    });

    console.log(this);
  });
});

如果您需要更多关于为什么会发生这种情况的信息，请阅读这篇文章。