为什么我的脚本不响应类更改?
我已经使用 jQuery 一段时间了,这个问题难倒了我——我真的希望我只是在胡思乱想! 我有以下 JS:
$(document).ready(function(){
$('.thumb,.link').click(loadContent);
});
function loadContent() {
alert(this.id);
if(this.id == 'contact')
{
$('#thumbs').hide();
$('#content').show().load('contact.html');
$('#home').addClass('link');
$('#contact').removeClass('link');
}
else if(this.id == 'home')
{
$('#thumbs').show();
$('.thumb').removeClass('dim');
$('#content').hide();
$('#home').removeClass('link');
}
else
{
var projectNumber = parseInt($(this).attr('src').replace("graphics/",""));
$('#thumbs').hide();
$('.thumb').removeClass('dim');
$('#content').show().load("projects/" + projectNumber + ".html");
$('#home').addClass('link');
}
}
和以下 HTML:
某个人
> > 所有项目
> 家具
对象
> 图形
WEB
; 联系人
这个想法是,单击“home”链接(span id =“home”),添加“link”类,使其根据 document.ready 函数可单击。我可以看到正在添加的类,实际上它的 CSS 使光标成为一个指针,所以我知道它正在工作。但是 loadContent() 函数似乎没有运行 - 它应该在单击时提醒其 ID,然后显示隐藏的“拇指”div - 但这些都没有发生。
我缺少什么?
I have been using jQuery for some time and this one's stumping me- I really hope I'm just brain-farting!
I have the following JS:
$(document).ready(function(){
$('.thumb,.link').click(loadContent);
});
function loadContent() {
alert(this.id);
if(this.id == 'contact')
{
$('#thumbs').hide();
$('#content').show().load('contact.html');
$('#home').addClass('link');
$('#contact').removeClass('link');
}
else if(this.id == 'home')
{
$('#thumbs').show();
$('.thumb').removeClass('dim');
$('#content').hide();
$('#home').removeClass('link');
}
else
{
var projectNumber = parseInt($(this).attr('src').replace("graphics/",""));
$('#thumbs').hide();
$('.thumb').removeClass('dim');
$('#content').show().load("projects/" + projectNumber + ".html");
$('#home').addClass('link');
}
}
and the following HTML:
<div id="container"> <table id="left"><tr><td><span id="home">SOME GUY</span><br /> <span id="all">></span> <span class="cat">ALL PROJECTS</span><br /> <span id="furniture"> </span> <span class="cat">FURNITURE</span><br /> <span id="objects"> </span> <span class="cat">OBJECTS</span><br /> <span id="graphics"> </span> <span class="cat">GRAPHICS</span><br /> <span id="web"> </span> <span class="cat">WEB</span><br /> <span id="contact" class="link">CONTACT</span></td></tr> </table> <div id="center"> <div id="thumbs"><img class="thumb furniture" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb objects" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb furniture" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb graphics" src="graphics/0.png" /><img class="thumb" src="graphics/0.png" /><img class="thumb web" src="graphics/0.png" /></div> <div id="content"></div> </div> </div>
The idea is that the "home" link (span id="home") is clicked, the class "link" gets added, making it clickable according to the document.ready function. I can see the class being added, indeed its CSS makes the cursor a pointer so I know it's working. But the loadContent() function seems not to run- it's supposed to alert its ID when clicked and then show the hidden "thumbs" div-- and none of that happens.
What am I missing?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
应该是:
当页面加载后动态添加
link
类时,您需要告诉 jQuery 查找它的未来实例。Should be:
When the
link
class is added dynamically after the page loads, you need to tell jQuery to look for future instances of it.当执行
$(document).ready
时,link
类不存在。尝试使用“click”参数而不是“click”调用来进行 live 。link
class isn't there when$(document).ready
is executed. Try live with 'click' parameter instead of 'click' call.