时间戳

首页 > 解决方案 > JavaScript 页面状态

javascript - JavaScript 页面状态

问题描述

我正在尝试将页面状态放在一起，但无法返回原始主页状态。在我单击链接 1 后，它会转到该页面，但是一旦我单击“返回”，什么都没有发生，并且控制台显示 id 名称“返回”为空。我猜是因为 id 在第一页状态中不存在？

这是我的代码：

const PageState = function() {
  let currentState = new homeState(this);
  this.init = function() {
    this.change(new homeState);
  }
  this.change = function(state) {
    currentState = state;
  }
};

// HOME
const homeState = function(page) {
  document.querySelector('#output-heading').textContent = null;
  document.querySelector('#output-content').innerHTML = `
     <div id="link-1">Link 01</div>
     <div id="link-2">Link 02</div>
     <div id="link-3">Link 03</div>
    `;
};

// LINK 02
const secondState = function(page) {
  document.querySelector('#output-heading').textContent = 'Page 02';
  document.querySelector('#output-content').innerHTML = `
     <p>This is the second page.</p>
     <div id="back">GO BACK</div>
    `;
};

// LINK 03
const thirdState = function(page) {
  document.querySelector('#output-heading').textContent = 'Page 03';
  document.querySelector('#output-content').innerHTML = `
    <p>This is the third page.</p>
    <div id="back">GO BACK</div>
    `;
};

// INIT PAGESTATE
const page = new PageState();

// INIT FIRST STATE
page.init();

// UI VARS
const one = document.getElementById('link-1'),
  two = document.getElementById('link-2'),
  three = document.getElementById('link-3');
back = document.getElementById('back');

one.addEventListener('click', (e) => {
  page.change(new firstState);
  e.preventDefault();
});

two.addEventListener('click', (e) => {
  page.change(new secondState);
  e.preventDefault();
});

three.addEventListener('click', (e) => {
  page.change(new thirdState);
  e.preventDefault();
});

back.addEventListener('click', (e) => {
  page.change(new homeState);
  e.preventDefault();
});
<div class="container-output">
  <h4 id="output-heading"></h4>
  <div id="output-content"></div>
</div>

标签： javascript

解决方案

在我单击链接 1 后，它会转到该页面，但是一旦我单击“返回”，什么都没有发生，并且控制台显示 id 名称“返回”为空。我猜是因为 id 在第一页状态中不存在？

是的，这就是问题所在。

您可以改为执行以下操作：

const homeState = function() {
  document.querySelector("#output-heading").textContent = null;
  document.querySelector("#output-content").innerHTML = `
      <div id="link-1">Link 01</div>
      <div id="link-2">Link 02</div>
      <div id="link-3">Link 03</div>
  `;
  const one = document.getElementById("link-1");
  const two = document.getElementById("link-2");
  const three = document.getElementById("link-3");

  one.addEventListener("click", (e) => {
    generatePageState("Page 01", "This is the first page.");
  });

  two.addEventListener("click", (e) => {
    generatePageState("Page 02", "This is the second page.");
  });

  three.addEventListener("click", (e) => {
    generatePageState("Page 03", "This is the third page.");
  });
};

const generatePageState = function(heading, text) {
  document.querySelector("#output-heading").textContent = heading;
  document.querySelector("#output-content").innerHTML = `
      <p>${text}.</p>
      <div id="back">GO BACK</div>
  `;
  const back = document.getElementById("back");
  back.addEventListener("click", (e) => {
    homeState();
  });
};

homeState();
<div class="container-output">
  <h4 id="output-heading"></h4>
  <div id="output-content"></div>
</div>

导航到页面后#output-content是动态设置的。链接被段落和按钮替换，所以现在按钮在布局中，我们可以向它添加事件侦听器。

推荐阅读