弹出序列

Question

我正在尝试为个人项目（求职网站）实现一系列 3 个弹出窗口。

1. 第一个弹窗是有关于职位的信息
2. 第二个是填写联系表
3. 最后一个是确认信息

当用户单击按钮时进行转换。 对于第一页，它是“.apply-button”

首先，我想知道是否应该创建 3 个不同的 HTML 文档，还是应该只使用 use？ （弹出框外的内容会一样）。

其次，我很难实现第一个和第二个弹出页面之间的过渡。

<div class="popup-wrapper popup-wrapper-1">
   <div class="popup">
     <div class="popup-close">x</div>
       <div class="popup-content">
         <h2>Job Details</h2>
           <div class="popup-job-description">
               <div class="job-descriptions">
                   <p><span class="popup-job-description-title">Title: </span>Proccess Engineer</p>
              </div>
              <div class="job-descriptions">
                  <p><span class="popup-job-description-company">Company: </span>Undisclosed</p>
             </div>

            <div class="job-descriptions">
                 <p><span class="popup-job-description-location">Location: </span>Naypyitaw</p>
            </div>
            <div class="job-descriptions">
                <p><span class="popup-job-description-location">Salary: </span>$75,000</p>
           </div>
           <div class="job-descriptions">
               <p><span class="popup-job-description-description">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et similique ex, iusto sint in ratione aut magnam! Accusamus eveniet aspernatur nihil? Distinctio vel fugiat eius eaque? Quas earum adipisci quis voluptate animi id atque alias. Sapiente aut explicabo voluptate!</p>
          </div>
          <div>
            <a class="apply-button">Apply Now</a>
          </div>
     </div>
   </div>

<div class="popup-wrapper popup-wrapper-2">
   <div class="popup">
      <div class="popup-close">x</div>
          <div class="popup-content">
             <h2>Only Few More Seconds...</h2>
                 <div class="popup-job-description">
                    <div class="contact-form">
                       <p class="sub">
                         <label>First Name:</label>
                         <input type="text" name="name">
                       </p>
                       <p class="sub">
                          <label>Last Name:</label>
                          <input type="text" name="company">
                       </p>
                       <p class="sub">
                         <label>Email:</label>
                         <input type="email" name="email">
                       </p>
                       <p class="sub">
                         <label>Phone:</label>
                         <input type="email" name="email">
                       </p>                             
                       <p class="sub">
                           <label>Resume:</label>
                           <input type="file" name="resume">
                       </p>   
                   </div>
                   <div>
                      <a class="complete-button">Apply Now</a>
               </div>
       </div>
   </div>

JS部分：

const apply = document.querySelector(".apply-button");
const applyOffer = document.querySelector(".popup-wrapper-1");
const applyContact = document.querySelector(".popup-wrapper-2");
apply.addEventListener("click",()=>{
    console.log('test');
    applyOffer.style.display="none";
    applyContact.style.display="block";

});  

Answer 1

我不确定在您进行测试的任何地方导致问题的原因是什么，但您发布的 JavaScript 似乎不是问题。
这个简化的片段使用您的脚本来演示单击侦听器如何更新 HTML 元素的style属性的display属性。

我添加的 CSS 最初隐藏了第二个“popup-wrapper”div。 单击按钮时，您的 JavaScript 会隐藏第一个按钮并显示第二个按钮。

（请注意， querySelector返回第一个匹配元素，因此对于现有的 HTML，您的脚本适用于正确的元素，但如果您使用popup-wrapper-1类添加其他元素，例如，此行为可能会改变。）

 const apply = document.querySelector(".apply-button"); const applyOffer = document.querySelector(".popup-wrapper-1"); const applyContact = document.querySelector(".popup-wrapper-2"); apply.addEventListener("click",()=>{ console.log('test'); applyOffer.style.display="none"; applyContact.style.display="block"; });

 .popup-wrapper-2{ display: none; }

 <div class="popup-wrapper popup-wrapper-1">Popup #1</div> <div class="popup-wrapper popup-wrapper-2">Popup #2</div> <button class="apply-button">Apply</button>

Answer 2

问题 1：这主要是意见和设计问题。 如果弹出窗口会经常使用，并且它们位于一个不太大而难以管理的文档中，那么就可以了，并且可能建议将它们保存在一个文档中。 这将使它更容易使用。 但是，如果您几乎从不使用它们，或者如果弹出窗口非常大，那么将它们分解为单独的文档可能会有所帮助。 如果您不希望它们成为完全独立的页面，您可以使用 AJAX 将它们加载进来。然后它们将完全相同，就好像它们是一个文档一样，但更易于维护。

问题 2：首先，您提供的两个 HTML 片段末尾都缺少两个结束</div>标记。 这可能只是您提出问题时的复制和粘贴错误。 一旦修复，真正的问题是您的按钮有一个href属性，这会导致浏览器导航到新页面。 这在您的 JavaScript 执行后立即发生，这不是您想要的。 有两种解决方案：

解决方案 1：防止单击链接时的默认操作。 只需将点击事件作为参数添加到您的事件函数并调用event.preventDefault() ，浏览器将不会导航到新页面。

apply.addEventListener("click", (event) => {
  console.log('test');
  event.preventDefault();
  applyOffer.style.display = "none";
  applyContact.style.display = "block";
});

解决方案 2：从.apply-button链接中删除href属性。 这将删除默认样式的a在大多数浏览器的标签，但它似乎像你反正覆盖它。

注意：使用这两种解决方案，如果 JavaScript 被禁用，您的网站就会中断。 对于大多数人来说，这不是问题，但是如果您无论如何都希望它工作，您可以通过导航到一个新页面来使其工作，该链接无需 JavaScript 即可工作，但防止默认设置并在 JavaScript 时使用弹出窗口可用。