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

jQuery: hide class such that subsequently created elements of that class are hidden

本文关键字：隐藏 创建 元素 jQuery      更新时间：2023-09-26

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

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

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

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

我想到的是模式：$('#container').on('click', '.myClass', function () {...，它将处理程序附加到稍后创建的元素。从本质上讲，我想用display属性来模拟这一点。

我认为您最好的选择可能是向#container添加一个类，类似于以下内容：

#container .myClass {
  display: none;
}

#container.with-whatevers .myClass {
  display: block;
}

$( '#container' ).on( 'click', '.myClass', function () {
  $( "#container" ).toggleClass( "with-whatevers" );
} );

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

我想到的模式是：$（'#container'）.on（'click'，'.myClass'，function（）{…它将处理程序附加到稍后创建的元素。

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

实际上，这里有一个绑定到DOMNodeInserted事件的例子，在大多数较新的浏览器中，每当元素插入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中不起作用，因为没有支持，我似乎记得见过一些变通方法，所以可能会使它跨浏览器。

下面是一个快速的演示

.myClass的CSS中应该有display:none。然后，只要你需要，就拨打.show()。

示例：http://jsfiddle.net/imsky/5J5Tt/

添加点击事件之前隐藏

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

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

$('#container').on('click', '.myClass', function(){
  $(this).toggle();
}
相关文章：