javascript - 如何对 18 个不同的类使用相同的 JQuery 函数？

Question

代码:

    <script>
$(document).ready(function() {

  $('.boxes').on('click', function(e){
    e.preventDefault();
    var $btn = $(this);
    $btn.toggleClass('opened');

    var heights = $btn.hasClass('opened') ? 300 : 100 ;
    $('.boxes').stop().animate({height: heights });
  });
});
    </script>

我有 18 个具有 boxes 类的盒子。正如您可以想象的那样，通过单击 .boxes，所有 18 个盒子都会打开和关闭。我想要做的是确保只有被单击的框打开和关闭，而不是所有框。这 18 个盒子具有唯一的 ID，如 box1、box2、box3 等。

我是 JS 新手，所以对我来说，一个合理的解决方案是重复上述代码 18 次，并使用盒子唯一的 id，但我知道这样的代码重复太多了。那么，如何确保只有被单击的框才会打开和关闭，而不是所有框呢？任何提示都会有所帮助。谢谢!

Answer 1

编辑:现在就尝试一下。

$(".boxes").on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('opened');
    var heights = $(this).hasClass('opened') ? 300 : 100 ;

    $(this).stop().animate({height: heights}); //Show clicked box
});

JSFiddle