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')吗$btn？这将只动画被点击的框。

$btn.stop().animate({height: heights });
^^^^

Answer 2

编辑：现在试一试。

$(".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

Answer 3

更改$('.boxes').stop().animate({height: heights });为

$(this).stop().animate({height: heights });

将仅切换选定的框。查看小提琴 http://jsfiddle.net/xSNYc/