jQuery AJAX导航问题
Typescript jQuery AJAX Navigation Issue
向地球同胞问好,
以下代码用于我的网站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
相关文章:
- 使用导航属性创建Kendo UI网格模型的问题
- Image Sprites和jQuery Mobile Ajax导航的问题
- Bootstrap一页导航Fluid网站最小化问题
- 引导程序导航栏崩溃问题
- pager.js的导航问题
- 后退导航/页面刷新问题
- winjs应用程序中的导航问题
- 平滑滚动并突出显示导航问题
- 粘性导航-JS Waypoints在浏览器调整大小时出现自定义粘性导航问题
- Javascript/Jquery超级Scrollorama导航问题
- j查询滑块导航问题
- 这个Windows Metro Javascript导航有什么问题
- 修复了在页面顶部滚动时居中导航的问题
- 带有页面导航问题的 HTML5 滑块
- Ionic:带有选项卡和侧菜单导航问题的主详细信息
- breezejs:非标量导航属性是只读的(多对多问题)
- IE8 问题 - jQuery 调整页面大小时导航 html
- 绝对定位导航箭头问题
- Javascript 修复了导航问题
- 引导:修复了导航不起作用的问题