Question

我试图通过使用Javascript注入html元素来创建一个动态加载页面的网站。当我将所有代码放在一个文件中时，我才能正常工作。现在我正在学习使用webpack编写模块代码，但我遇到了问题。所以你可以看到，html文件只有一个导航。点击菜单，javascript会将模板注入wed-spa div。

问题是当Home加载到window.load时，javascript还运行TriCouple中的方法setPosition，它应该设置从Couple.js注入的html模板元素的样式，这当然不存在。 window.load。

要清除解释，正确的行为将是： 1.窗口加载并立即注入Home模板， 2.点击＆＃34;情侣＆＃34;从导航它应该注入情侣模板， 3.应该通过TriCouple.js。

中的方法应用Couple模板的样式

问题： javascript正在尝试做3号，而在数字1中，夫妻元素不会出现。

HTML：

＆＃13;

<!doctype html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
        <link href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:400,900|Tangerine&amp;subset=latin-ext" rel="stylesheet">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="./assets/styles/css/style.css">


        <title>
            Wedding template
        </title>
    </head>
    <body>
        <div class="container-fluid wed-home">
          <nav class="wed-nav navbar navbar-expand-lg navbar-light bg-light">
              <a class="navbar-brand" href="#">John and John</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                  <div class="navbar-nav">
                      <a class="nav-item nav-link active" id="home">Home <span class="sr-only">(current)</span></a>
                      <a class="nav-item nav-link" id="couple">Couple</a>
                      <a class="nav-item nav-link" id="bridesmaid">Bridesmaid</a>
                      <a class="nav-item nav-link" id="groomsmen">Groomsmen</a>
                      <a class="nav-item nav-link" id="events">Events</a>
                      <a class="nav-item nav-link" id="story">Story</a>
                      <a class="nav-item nav-link" id="rsvp">RSVP</a>
                  </div>
              </div>
          </nav>
          <div class="wed-spa"></div>
        </div>
        <script src="./temp/scripts/bundle.js"></script>
    </body>
    </html>

＆＃13;

我的主要app.js：

＆＃13;

import Home from './modules/Home';
import Couple from './modules/Couple';
import TriCouple from './modules/TriCouple';


var home = new Home();

window.addEventListener("load", function() {
  var loader = new Home;
  loader.loadHome();
})

var couple = new Couple();
var triCouple = new TriCouple();

＆＃13;

Home.js

＆＃13;

class Home {
  constructor() {
    this.template = `
    <div class="wed-heading row">
        <div class="wed-heading-wrapper col">
            <h1>Angelo & Klaudia
                <br>
                <span class="std">Save the date</span>
                <span class="wed-date">22.08.2015</span>
            </h1>
        </div>
    </div>
    `;
    this.homeMenu = document.querySelector("#home");
    this.spa = document.querySelector(".wed-spa");
    this.homeSection = document.querySelector(".wed-home");
    this.homeClick();
  };

  homeClick() {
    var that = this;
    this.homeMenu.addEventListener("click", function(){
        that.loadHome();
    })
  };

  loadHome() {
    this.homeSection.classList.add('wed-front');
    this.loadTemplate();
  };


  loadTemplate() {
    this.spa.innerHTML = this.template;
  }

}
export default Home;

＆＃13;

Couple.js

＆＃13;

class Couple {
  constructor() {
//Start of HTML Template
    this.template = `
      <div class="message-popup"></div>
      <div class="wed-couple container">
          <div class="wed-couple-newlyweds wed-couple-bride">
              <div class="wed-couple-newlyweds-img wed-couple-bride-img">
                  <div class="wed-couple-name-row row">
                      <div class="wed-couple-desc wed-couple-name wed-couple-name-bride col-md-auto">
                          <h1>Klaudia Kim</h1>
                      </div>
                      <div class="wed-couple-desc wed-couple-position wed-couple-position-bride col-md-auto">
                          <span>The Bride</span>
                      </div>
                  </div>

                  <div class="wed-couple-newlyweds-message wed-couple-newlyweds-message-bride">
                      <span>Message from the Bride</span>
                  </div>

                  </div>
                  </div>

          <div class="wed-couple-newlyweds wed-couple-groom">
              <div class="wed-couple-newlyweds-img wed-couple-groom-img">
                  <div class="wed-couple-name-row row">
                      <div class="wed-couple-desc wed-couple-name wed-couple-name-groom col-md-auto">
                          <h1>Angelo Kim</h1>
                      </div>
                      <div class="wed-couple-desc wed-couple-position wed-couple-position-groom col-md-auto">
                          <span>The Groom</span>
                      </div>
                  </div>

                      <div class="wed-couple-newlyweds-message wed-couple-newlyweds-message-groom">
                          <span>Message from the Groom</span>
                      </div>

              </div>
          </div>
      </div>
    `;
// End of HTML Template
//DOM declaration
  this.spa = document.querySelector(".wed-spa");
  this.coupleButton = document.querySelector('#couple');
  this.homeSection = document.querySelector(".wed-home");

  //initialize methods
  this.loadCouple();

  };
// End Constructor

// Start methods
loadCouple() {
  var _this = this;
  this.coupleButton.addEventListener("click", function() {
    _this.homeSection.classList.remove('wed-front');
    _this.spa.innerHTML = _this.template;
  });
};






}


export default Couple;

＆＃13;

Tricouple.js

＆＃13;

class TriCouple {
  constructor() {
    this.wedCouple = document.querySelector('.wed-couple');
    this.coupleButton = document.querySelector('#couple');
    this.wedCoupleBride = document.querySelector(".wed-couple-bride");
    this.wedCoupleBrideImg = document.querySelector(".wed-couple-bride-img");
    this.wedCoupleGroom = document.querySelector(".wed-couple-groom");
    this.wedCoupleGroomImg = document.querySelector(".wed-couple-groom-img");
    this.wedCoupleNewlyweds = document.querySelectorAll(".wed-couple-newlyweds");

  // Detect initial Viewport
    this.initialWindowWidth = window.innerWidth;
    this.initialWindowHeight = window.innerHeight;
    this.diagonal = Math.sqrt(Math.pow(this.initialWindowWidth, 2) + Math.pow(this.initialWindowHeight, 2));

// Calculate sinus
    this.sineX = this.initialWindowWidth / this.diagonal

// Calculate angle for rotation
    this.sinDegree = Math.asin(this.sineX) * (180 / Math.PI);

    //Initiate methods
    this.setHeight();
    this.setPosition();

  };


  //SET HEIGHT
  setHeight() {
    this.wedCoupleNewlyweds.forEach((partner) => {
      console.log('log for each partner');
      partner.style.height = this.diagonal + 'px';
    })

  };
  //POSITION TO LEFT & RIGHT
  setPosition(callback, obj){
    this.wedCoupleBride.style.left = -this.initialWindowWidth + 'px';
    this.wedCoupleBrideImg.style.left = this.initialWindowWidth + 'px';
    this.wedCoupleGroom.style.right = -this.initialWindowWidth + 'px';
    this.wedCoupleGroomImg.style.right = this.initialWindowWidth + 'px';
    callback.call(obj, null);
  }
}


export default TriCouple;

＆＃13;

javascript过早地从其他模块运行方法

0 个答案: