如何使用 javascript 为具有相同 class/name 的 collection 个元素触发 css 事件

Question

真的在标题中说了我有这个 javascript

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

我有一些名为 "tile" 的 html 定义框，这里的问题是，当我单击单个图块时，flipoutx 功能有效，但只有我单击的图块....

我怎样才能让我所有的图块都被称为 "tile" 而不仅仅是我点击的那个图块？

Answer 1

尝试...

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

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

对您引用的内容进行简单更改。您需要引用 tile(s).

，而不是引用用 this 单击的 .tile

Answer 2

使用

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

How to use javascript to trigger a css event for a collection of elements that have the same class/name