为什么我的脚本不响应类更改?

发布于 2024-09-13 02:30:15 字数 2561 浏览 13 评论 0原文

我已经使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无人接听 2024-09-20 02:30:15
$('.thumb,.link').click(loadContent);

应该是:

$('.thumb,.link').live('click', loadContent);

当页面加载后动态添加 link 类时,您需要告诉 jQuery 查找它的未来实例。

$('.thumb,.link').click(loadContent);

Should be:

$('.thumb,.link').live('click', loadContent);

When the link class is added dynamically after the page loads, you need to tell jQuery to look for future instances of it.

帅冕 2024-09-20 02:30:15

当执行 $(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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文