0

我有以下问题：为了在不同情况下标记元素，我想向元素添加一个类：

jQuery('#menu-item-41 a').addClass('newsbox-closed1');

稍后，当单击具有此类的元素时，我想做一些有趣的工作人员-到目前为止，它工作正常：

jQuery('.newsbox-closed1').click(function(){
      jQuery('#newsbox').css('display', 'block');
      jQuery(this).css('background-color', '#FF33AB').removeClass('newsbox-closed1').addClass('news-open');
 });

直到现在一切都很好。元素获得类“news-open”并且新闻框出现。但随后以下内容不再起作用：

jQuery('.news-open').click(function(){
  alert('JUCVJU');
  jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
  jQuery('#newsbox').css('display', 'none');
});

想法：当有人再次点击同一个链接时，新闻框应该消失并且链接获得一个新的类。这不起作用 - 没有删除类“new-open”，没有显示警报框，什么都没有。此外，以下工作已完成一半 - 它是新闻框上的关闭按钮：

jQuery('#close').click(function(){
  jQuery('#newsbox').css('display', 'none');
  jQuery('.news-open').removeClass('news-offen').addClass('newsbox-closed2')
});

id 为“newsbox”的元素消失了，但第二部分没有效果。该元素的类仍然存在。我没有收到任何错误消息，什么都没有……有人知道是什么原因导致的吗？

最好的，托拜厄斯

4

4 回答 4

1

您可能需要委托您的事件处理程序，因为您在文档加载后更改类。尝试更换

jQuery('.news-open').click(function(){

和

jQuery(document).on('click', '.news-open', function(){

但是，如果您可以使其比 更具体document，那么您应该这样做。将您的活动委托给最近的容器，.news-open以获得最佳效率。

http://api.jquery.com/on/

于 2012-08-30T17:17:34.520 回答
1

您正在运行时添加类。改变

jQuery('.news-open').click(function(){

至

jQuery('.news-open').on('click',(function(){

以上是针对 JQuery >=1.7

对于 JQuery <1.7，使用

jQuery('.news-open').live('click',function(){

在运行时创建的元素也可以在 JQuery 中使用。

于 2012-08-30T17:20:18.310 回答
0

非常相似的问题：在单击链接时，我制作了一个动画以显示隐藏的 div，并将'.hideMe'类添加到布局的其余部分，以便单击显示的 div 之外的任何位置都会再次隐藏它。 '.hideMe'jQuery 不能选择它，因为它在页面加载时不存在。通过将两种方法与委托链接在一起来解决.on()，如下所示：https ://stackoverflow.com/a/8261148

$(document.body).on('click', '#link', function() {
  $('div').addClass('.hideMe').animate(); // animation code here
  $('#newdiv').show();
}).on('click', '.hideme', function() {
  $('div').removeClass('.hideMe').animate(); // animation code here
  $('#newdiv').hide();
});

这是 jQuery 1.10.x。

于 2014-01-12T13:43:10.813 回答
0

感谢你们！！！

为了让其他面临类似问题的人明白这一点，我的工作代码如下所示：

jQuery('#menu-item-41').on('click', '.news-open', (function(){
  alert('JUCVJU');
  jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
  jQuery('#newsbox').css('display', 'none');
}));

id“menu-item-41”是容器的id，它用类“news-open”围绕我的元素。现在，当我再次单击进一步重新分类的元素并且新闻框消失时，我得到了警报框。

于 2012-08-31T13:52:39.277 回答