Как совершить одно действие, для разных классов (jQuery)?

Question

[triowinner]

Здравствуйте.

У меня есть допустим 3 кнопки с Id=click, Id=click2, Id=click3, которые открывают соответствующие скрытые блоки .block, .block2, block3. Я написал вот такой простенький код, который открывает/скрывает блоки.

$(function() {
 $('#click').on('click', function() {
  if ($('.block').is(':hidden')) {
     $('.block').show(0);
  } else {
  $('.block').hide(0);
  }
  });
});

Проблема в том, что я не могу "догнать" ( видимо пора спать :) ), как правильно написать скрипт, который будет выполнять одно действие для всех блоков. Просто сейчас мне приходится дублировать код и вместо допустим id=click подставлять id=click2 и т.д. и тупо копирую код с разными классами и ID которые мне нужно, а нужно как-то "оптимизировать" код.

Answer 1

[y0u]

https://jsfiddle.net/9stLq6tp/

Comments

[triowinner]

Большое спасибо!

[triowinner]

Скажите пожалуйста, а почему с #knopka(ID) не работает, а с .knopka(cLass) - работает. В чем разница?

[y0u]

triowinner, один ID может быть только в одном экземпляре на одной странице.

[triowinner]

y0u, точно, это же начальный курс) спасибо еще раз.

Answer 2

[Ptolemy_master]

Просто вызывайте селектор не отдельной кнопки по ID, а класса, затем определяйте, какая нажата, это можно делать по-разному, например, так:

$(function() {
 $('.click').on('click', function(e) {
  var blockClass = '.' + ( e.target.id.indexOf('block3') > -1 ? (e.target.id.indexOf('block2') > -1 ? 'block2' : 'block') : 'block3'); 
// очень  тупо, лучше использовать регулярные выражения, но это другая тема
  if ($(blockClass).is(':hidden')) {
     $(blockClass).show(0);
  } else {
  $(blockClass).hide(0);
  }
  });
});

Comments

[triowinner]

Большое спасибо!