提供相同的 类 唯一标识符以停止代码重复

Question

我有这个JS代码

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script>

.tile class 适用于所有称为 tile 的按钮。

有什么方法可以引入唯一标识符而不必为每个按钮单独重复此脚本。

这是 html

中的图块参考示例

<a class="tile double bg-tile1color live animated flipInX" data-click="transform">

Answer 1

使用 $(this)，它仅适用于您点击的元素

$('.tile').on('click', function() {

  $(this).addClass("flipOutX");
  setTimeout(function() {
    $('.metro .tile-area-darkCrimson').css('backgroundColor', '#4c7fb5');
    $(".tile-group.main").css({
      marginLeft: "-40px",
      width: "1080px"
    }).load("musability-musictherapy-company-overview.html");
  }, 2000);

});