JQuery выбирает div на основе их идентификатора

Question

Я открываю JQuery и не могу найти ответ на свой вопрос после долгих исследований, потому что не знаю, как правильно его выразить.

У меня 2 линейки + 2 направляющихмоя страница и 2 кнопки, чтобы показать или скрыть их.Я написал кое-что, что работает, но я хотел бы оптимизировать код, сделав его короче.

Вот оно:

$('#ruler-bg1, #ruler-bg2').hide();

$('#ruler1').click(function() {
  $('#ruler-bg1').slideToggle(100);
  $('#guide1').toggleClass('guide-on');
});

$('#ruler2').click(function() {
  $('#ruler-bg2').slideToggle(100);
  $('#guide2').toggleClass('guide-on');
});

Что я не могу понять, так это как сгруппировать 2функции, поэтому клик по #ruler+number показывает #ruler-bg+same_number и #guide+same_number.

Answer 1

Примерно так должно поступить:

$('#ruler1, #ruler2').click(function(){
    var num = this.id.substr(6);

    $('#ruler-bg' + num).slideToggle(100);
    $('#guide' + num).toggleClass('guide-on');
});

Вероятно, было бы лучше, если бы между элементом, на который щелкнули, и элементами, на которые воздействовали, была структурная связь ...

Answer 2

Я бы добавил класс "ruler" ко всем "rulers" и использовал бы идентификаторы в качестве идентификатора на ruler-bg и guide.

$('.ruler').click(function(){
    $('#bg-'+this.id).slideToggle(100);
    $('#guide-'+this.id).toggleClass('guide-on');
});

Answer 3

initRuler(1);
initRuler(2);

function initRuler(id) {
  $('#ruler' + id).click(function() {
    $('#ruler-bg' + id).slideToggle(100);
    $('#guide' + id).toggleClass('guide-on');
  });
}