Можно ли укоротить код с сохранением смысла?

Question

[justifycontent]

$(document).ready(function() {
    $('.open__sub-filtr').click(function(event) {
        $('.open__sub-filtr, .sub-filtr').toggleClass('active');
    });
});
$(document).ready(function() {
    $('.open__sub-filtr-2').click(function(event) {
        $('.open__sub-filtr-2, .sub-filtr-2').toggleClass('active');
    });
});
$(document).ready(function() {
    $('.open__sub-filtr-3').click(function(event) {
        $('.open__sub-filtr-3, .sub-filtr-3').toggleClass('active');
    });
});
$(document).ready(function() {
    $('.open__sub-filtr-4').click(function(event) {
        $('.open__sub-filtr-4, .sub-filtr-4').toggleClass('active');
    });
});
$(document).ready(function() {
    $('.open__sub-filtr-5').click(function(event) {
        $('.open__sub-filtr-5, .sub-filtr-5').toggleClass('active');
    });
});

Можно ли объединить эти 5 функций в одну? Надо упросить.

Answer 1

[Талян]

Ну во-первых зачем 5 штук document.ready?

Код-шутка 1

$(document).ready(function() {
    $('.open__sub-filtr').click(function(event) {
        $('.open__sub-filtr, .sub-filtr').toggleClass('active');
    });
$('.open__sub-filtr-2').click(function(event) {
        $('.open__sub-filtr-2, .sub-filtr-2').toggleClass('active');
    });
$('.open__sub-filtr-3').click(function(event) {
        $('.open__sub-filtr-3, .sub-filtr-3').toggleClass('active');
    });
$('.open__sub-filtr-4').click(function(event) {
        $('.open__sub-filtr-4, .sub-filtr-4').toggleClass('active');
    });
$('.open__sub-filtr-5').click(function(event) {
        $('.open__sub-filtr-5, .sub-filtr-5').toggleClass('active');
    });
});

Не глянув вашу структуру HTML кода могу посоветовать только кривое решение, которое решением то назвать сложно. Кроме того у вас нелогичные имена классов, перед классом с именем open__sub-filtr-2 по мнению компьютера идет отнюдь не open__sub-filtr а open__sub-filtr-1, поэтому простой итерацией говнокодить тоже не получится:

Код-шутка 2

$(document).ready(function() {
for (var i = 0; i < 5; i++) {

$('.open__sub-filtr-'+i).click(function(event) {
        $('.open__sub-filtr-'+i+', .sub-filtr-'+i).toggleClass('active');
    });

}
});

Вангую, что ваши эти все элементы являются дочерними для какого-то другого элемента, поэтому их легко можно перебрать циклом, и указывая не эти БЭМ-классы в качестве указателя, а номер дочернего элемента. Так будет правильно.

А теперь, чтобы закрепить материал - гуглите Шура, гуглите. Ключевые слова - выше.

Answer 2

[Robur]

Можно.

Answer 3

[Александр]

$(document).ready(function () {
	$('[class^="open__sub-filtr"]').click(function (event) {
		$(this).toggleClass('active');
		$(this).find('[class^="sub-filtr"]').toggleClass('active');
	});
});

Вроде не ошибся.