0
问候同胞Earthicans,打字稿jQuery的AJAX导航问题
下面的代码是为了应付简单的导航功能,用在我的网站上brianjenkins94.me和最近的一些重构后,我似乎已经打破了#nav.on(“点击“)事件处理程序,我似乎无法找出原因。
如果任何人都可以确定为什么这段代码不起作用,或者提供一些洞察力,以确定是否有更好的方法去做这件事,(我真的对正确的设计和正确的练习感兴趣,这个错误只是一个方便的借口做一个职位,并得到输入)它将不胜感激。
由于时间提前,
布赖恩
/// <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();
你认为你可以在这个有点扩大?我是否在所有情况下使用'''this''',或仅在涉及jQuery的情况下使用'''this'''?始终使用箭头功能是否更好? –
你只需要注意事件处理程序。我已经扩大了答案。 http://stackoverflow.com/posts/31364157/revisions – basarat
我做了你说的修改,但似乎还没有分配给$(“#nav”)的点击监听器。 –