如何使用JavaScript触发具有相同类/名称的元素集合的CSS事件

Question

说真的，所有的标题，我有这个JavaScript

<script>          
$(".tile").click(function(e){
 $(this).toggleClass("flipOutX")  ; 
})
</script> 

我有一些html定义框称为“ tile”，这里的问题是，当我单击单个图块时，flipoutx函数有效，但只有我单击的图块...。

如何使我所有被称为“平铺”的图块而不只是单击的图块起作用？

Answer 1

尝试...

$(".tile").click(function(e) {
  $(".tile").toggleClass("flipOutX"); 
});

将$(this) （单个图块）更改$(".tile") （元素的集合）是允许单击一个图块时所有图块移动的原因。

您所引用内容的简单更改。 与其引用单击此 .tile的引用， .tile如引用其.tile tile 。

Answer 2

采用

$(".tile").click(function(e){
$('.tile').toggleClass("flipOutX")  ; 
})