Как я могу использовать одну и ту же функцию JQuery для 18 разных классов?

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 ящиков имеют уникальные идентификаторы, такие как box1, box2, box3 и т. Д.

Я новичок в JS, поэтому для меня логическое решение будет повторять вышеуказанный код 18 раз и использовать уникальный идентификатор для ящиков, но я знаю, что это слишком много повторений кода. Итак, как я могу убедиться, что только щелчок, который открывается, - это тот, который открывается и закрывается, а не все из них? Любой совет будет полезен. Благодаря!

Answer 1

EDIT: Дайте ему попробовать.

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

Разве вы не можете изменить $('.boxes') на $btn? Это будет анимировать только поле, которое будет нажато.

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

Answer 3

изменения $('.boxes').stop().animate({height: heights }); в

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

будет переключаться только выбранные окна. Посмотрите скрипку http://jsfiddle.net/xSNYc/