javascript - jQuery:隐藏类，以便隐藏该类随后创建的元素

Question

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

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

但是，如果 myClass 被隐藏并且创建了该类的新元素，它是可见的，因为 .hide() 没有影响它。要解决此问题，如果类在创建时隐藏，我将隐藏新创建的元素。

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

我正在考虑以下模式:$('#container').on('click', '.myClass', function () {... 它将处理程序附加到元素稍后创建。本质上，我想用显示属性来模拟它。

Answer 1

我认为您最好的选择可能是向 #container 添加一个类，如下所示:

#container .myClass {

  display: none;

}


#container.with-whatevers .myClass {

  display: block;

}


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

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

} );

我不确定您切换 .myClass 元素可见性的确切机制是什么——显然，如果它们是隐藏的，您不能单击其中一个来切换它们的可见性。

I'm thinking of the pattern: $('#container').on('click', '.myClass', function () {... which attaches the handler to elements created later.

这实际上并没有将处理程序附加到稍后创建的元素。它将它附加到 #container。然后其后代上的任何点击事件都会冒泡，如果目标元素与传递给 on() 的选择器匹配，则处理程序将运行。