Javascript jQuery：隐藏类，以便隐藏该类随后创建的元素

我一直在使用标准方法隐藏/显示一个类，即：

$('.myClass').show();  // or .hide() or .toggle() 

但是，如果隐藏了

myClass

，并且创建了该类的新元素，则该元素是可见的，因为

.hide（）

不会影响它。为了解决这个问题，如果类在创建时被隐藏，我将隐藏新创建的元素

但是，是否有一种方法可以隐藏该类，使其自动应用于随后创建的元素

---

我正在考虑模式：

$（“#container”）。在（'click'，'.myClass'，函数（）{…

，它将处理程序附加到以后创建的元素。本质上，我想用display属性来模拟这一点。

在添加click事件之前隐藏

$('.myClass').hide();

然后使用jQuery的.on（）或.delegate（）方法

---

.myClass

在CSS中应该有

显示：none

。然后，在需要时调用

.show（）

---

示例：

实际上，这里有一个绑定到

domandeinserted

事件的示例，在大多数较新的浏览器中，每当将元素插入DOM时，就会触发该事件：

$(document).on('DOMNodeInserted', function(e) {//whenever an element is inserted
    if ($(e.target).is('.myClass')) {          //check if it has the right class
        $(e.target).hide();                    //and hide it if it does
    }
});

它在IE中不起作用，因为没有支持，我似乎记得看到过一些解决方法，所以它可能是跨浏览器的

---

这里有一个快速的

我想你最好的选择可能是在

#container

中添加一个类，如下所示：

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


$( '#container' ).on( 'click', '.myClass', function () {

  $( "#container" ).toggleClass( "with-whatevers" );

} );

我不确定切换

.myClass

元素可见性的具体机制是什么——显然，如果它们是隐藏的，就不能单击一个来切换它们的可见性

我考虑的模式是：$（'#container'）。在（'click'，'.myClass'，函数（）{…，它将处理程序附加到以后创建的元素

---

这实际上不会将处理程序附加到以后创建的元素。它会将处理程序附加到

#container

。然后，其子代上的任何单击事件都将冒泡出现，如果目标元素与传递给

on（）的选择器匹配

，处理程序将运行。

我认为没有？我能想到的最接近的方法是将某些内容绑定到DomainNodeInserted！您可以使用

.hidden

类，而不是使用

show（）/hide（）

，每当你创建一个新元素时，你首先给它一个类。顺便说一句，如果你是创建和初始化这些元素的人，你可以很容易地在初始化过程中将它们隐藏起来。@ŠimeVidas是的，我在别处已经使用了一个

.hidden

类，尽管我在这里使用它没有什么价值，因为我仍然必须检查

myClass

元素当前是否隐藏了类

，然后将第二个类（
hidden
）添加到新创建的元素中。我认为这里有一些误解。不涉及点击。我只是使用点击处理程序作为类似示例：）那你为什么不通过CSS隐藏它们呢？是的，这更像我在寻找的东西。不过，我创建了大量元素，所以我想知道效率成本是多少。如果
if
还必须检查
myClass
是否已经隐藏。这是非常新的东西，我还没有真正了解效率，所以我认为你必须在jsperf中运行它，或者在本地测试它，以便自己查看。添加一个检查来查看元素是否隐藏没有问题。这不是我在生产站点中使用的东西，但玩起来很有趣！嗯……有时
myClass
是隐藏的，有时不是。关键是它是否隐藏或者不是在新元素创建时。@Nick如果像imsky建议的那样定义，则具有该类的任何元素在创建时都将被隐藏。调用
show
或
hide
会影响元素的
style
属性，而不是其类。if.myClass{display:none；}在您的CSS中，浏览器无法将其绘制到DOM中。除非您在HTML中传递内联CSS规则。@Caio Bianchi Huh？绘制到DOM中？如果
。在添加另一个元素时，myClass
是任意可见的，请使用
$（“.myClass:visible”）检查它是否可见.length
如果这是真的，那么在插入元素后调用
.show（）
。好的，我会用CSS这样做，只需在
#container
上添加/删除/切换该类。我想我已经在这个fiddle上创建了一个解决方案：jsfiddle.net/8hvs。切换是通过单击另一个元素（即，一个等价的按钮）实现的，顺便说一句：）我不明白——那应该显示什么？你只是在3秒钟后添加了两个更可见的
.myClass
元素。是的，我的小提琴没有正常工作，正如@adeneo所指出的：（然而，你的小提琴是一个非常好的解决方案。我会接受它！！：）我刚刚在实际代码中实现了这个解决方案，这是一个很好的解决方案。为此干杯——并对我花了这么长时间才理解您的方法表示歉意：）
#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


$( '#container' ).on( 'click', '.myClass', function () {

  $( "#container" ).toggleClass( "with-whatevers" );

} );