Как оптимизировать код на jquery?

Question

[KristinaL]

Здравствуйте, прощу прощения за столь легкий вопрос, но я еще новичок в jquery.
Помогите оптимизировать код на jquery.
У меня есть 3 одинаковых кусочка кода для 3 дивов со своими айди. Сделала для того, чтобы код выполнялся только в рамках одного дива, а не перепрыгивал на другие, так как классы одинаковые. Сейчас все работает, как надо.
Но как можно это переписать, чтобы не указывать айди и не повторять куски кода.
Надеюсь, понятно объяснила.

Заранее спасибо

$('.displayblock').hide();
$('.111_cl .panel-heading.slide a').click(function() {
if ($('.111_cl .panel-heading.slide').hasClass('open')) {
$('.111_cl .displayblock').hide();
$('.111_cl .panel-heading a input[type="radio"]').prop('checked', false);
}
else {
$('.111_cl .displayblock').show();
$('.111_cl .panel-heading a input[type="radio"]').prop('checked', true);
}
});

$('.222_cl .panel-heading.slide a').click(function() {
if ($('.222_cl .panel-heading.slide').hasClass('open')) {
$('.222_cl .displayblock').hide();
$('.222_cl .panel-heading a input[type="radio"]').prop('checked', false);
}
else {
$('.222_cl .displayblock').show();
$('.222_cl .panel-heading a input[type="radio"]').prop('checked', true);
}
});

$('.333_cl .panel-heading.slide a').click(function() {
if ($('.333_cl .panel-heading.slide').hasClass('open')) {
$('.333_cl .displayblock').hide();
$('.333_cl .panel-heading a input[type="radio"]').prop('checked', false);
}
else {
$('.333_cl .displayblock').show();
$('.333_cl .panel-heading a input[type="radio"]').prop('checked', true);
}
});

Answer 1

[Дмитрий Еремин]

У меня есть 3 одинаковых кусочка кода для 3 дивов со своими айди.

- в коде нигде не упоминается айди
Используйте ключевое слово this

$('.panel-heading.slide a').click(function() {
  if ($(this).hasClass('open')) {
   /*...*/ 
 } else {
  /*...*/
   }
});

Под this у вас будет подразумеваться кликнутый элемент. Соответственно, работу можно определить, по отношению к кликнотому элементу (дочерний, родительский, соседний)

Answer 2

[KristinaL]

Ой простите, хотела написать айди, но написала класс :)

Comments

[KristinaL]

Сейчас попробую переписать, как вы сказали

[KristinaL]

Переписала вот так

$('.displayblock').hide();
$('.panel-heading.slide a').click(function() {
if ($(this).parent().hasClass('open')) {
$('.displayblock').hide();
$('.panel-heading a input[type="radio"]').prop('checked', false);
}
else {
$('.displayblock').show();
$('.panel-heading a input[type="radio"]').prop('checked', true);
}
});

Но при клике срабатывает сразу все и для всех дивов :(

[Sn0wSky]

KristinaL дак Вы просто селекторами пытаетесь выбрать какой-то конкретный блок, а выбираете сразу все на странице. Отталкивайтесь от $(this). $('.displayblock') => $(this).closest(".displayblock") ............. $('.panel-heading a input[type="radio"]') => $(this).find("input[type='radio']")