jQuery AJAX导航问题

Typescript jQuery AJAX Navigation Issue

本文关键字:问题 导航 AJAX jQuery      更新时间:2023-09-26

向地球同胞问好,

以下代码用于我的网站brianjenkins94。为了处理简单的导航功能,在最近的一些重构之后,我似乎打破了#nav.on("click")事件处理程序,我似乎找不到原因。

如果有人能确定为什么这段代码是非功能性的,或者可能提供一些关于是否有更好的方法去做这件事的见解,(我真的对适当的设计和正确的实践感兴趣,这个错误只是一个方便的借口,使一个帖子和获得输入)它将非常感激。

提前感谢,

布赖恩


/// <reference path="jquery.d.ts" />
"use strict";
const SERVERNAME: string = "http://brianjenkins94.me/";
//const DOCUMENTROOT: string = "https://rawgit.com/brianjenkins94/local.blog.com/master/";
class Navigation {
  private body: JQuery;
  private nav: JQuery;
  private navToggle: JQuery;
  constructor(args: any[]) {
    this.body = args[0];
    this.nav = args[1];
    this.navToggle = args[2];
  }
  public init(): void {
    this.stopPropogation();
    this.addClickListener(this.body);
    this.addClickListener(this.navToggle);
    this.addClickListener(this.nav);
    this.addKeyCodeListener(27);
    this.addLinkListener();
  }
  private stopPropogation(): void {
    (this.nav).on("click touchend", function(event: Event): void {
      event.stopPropagation();
    });
  }
  private addClickListener(target: JQuery): void {
    (target).on("click touchend", (event: Event) => {
      if (!(target === (this.body))) {
        event.preventDefault();
        event.stopPropagation();
        if (target === this.navToggle) {
          (this.body).toggleClass("nav-visible");
          return;
        }
      }
      (this.body).removeClass("nav-visible");
    });
  }
  private addKeyCodeListener(keycode: number): void {
    $(window).on("keydown", function(event: JQueryKeyEventObject): void {
      if (event.keyCode === keycode) {
        (this.body).removeClass("nav-visible");
      }
    });
  }
  private addLinkListener(): void {
    // FIXME: This can be optimized.
    $("#nav .links a").click(function(event: Event): void {
      if (!$(this).hasClass("active")) {
        $("#nav .links a").removeClass("active");
        $(this).addClass("active");
        document.location.hash = $(this).attr("href");
        switch (document.location.hash) {
          case "#home":
            $.get(SERVERNAME + "home", function(data: string): void {
              $("body").removeClass("nav-visible");
              $("#content").show();
              $("#iframe").html(data);
              console.log("Loaded index.html");
              $(window).scrollTop(0);
            });
            break;
          case "#showcase":
            $.get(SERVERNAME + "showcase", function(data: string): void {
              $("body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded showcase.html");
              $(window).scrollTop(0);
            });
            break;
          case "#fraise":
            $.get(SERVERNAME + "fraise", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded fraise.html");
              $(window).scrollTop(0);
            });
            break;
          case "#sharpcraft":
            $.get(SERVERNAME + "sharpcraft", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded sharpcraft.html");
              $(window).scrollTop(0);
            });
            break;
          case "#tablature":
            $.get(SERVERNAME + "tablature", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded tablature.html");
              $(window).scrollTop(0);
            });
            break;
          case "#web-design":
            $.get(SERVERNAME + "web-design", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded web-design.html");
              $(window).scrollTop(0);
            });
            break;
          case "#about":
            $.get(SERVERNAME + "about", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded about.html");
              $(window).scrollTop(0);
            });
            break;
          case "#devtools":
            $.get(SERVERNAME + "devtools", function(data: string): void {
              $("#body").removeClass("nav-visible");
              $("#content").hide();
              $("#iframe").html(data);
              console.log("Loaded devtools.html");
              $(window).scrollTop(0);
            });
            break;
          default:
            // No corresponding link
            event.preventDefault();
            $("#body").removeClass("nav-visible");
            break;
        }
      } else {
        // Same link
        $("#nav .links a").removeClass("active");
        $(document.location.hash).click();
        console.log("Simulating " + document.location.hash + " link click.");
      }
    });
    if (document.location.hash.length === 0) {
      $("#home").click();
      console.log("Simulating #home link click.");
    } else {
      $(document.location.hash).click();
      console.log("Simulating " + document.location.hash + " link click.");
    }
  }
}
var Nav: Navigation = new Navigation([$("body"), $("#nav"), $("a[href='"#nav'"]")]);
Nav.init();

$("#nav .links a").click(function(event: Event): void {

使用箭头函数代替,即执行$("#nav .links a").click((event: Event): void => {。这是因为在JQuery事件处理程序中的this实际上是被点击的对象,而不是包含类。

这是一个正确使用this的视频:https://www.youtube.com/watch?v=tvocUcbCupA