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。你可以通过点击.box来想象所有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/

如何为18个不同的类使用相同的JQuery函数？

3 个答案: