Рефакторинг и сушка кода jQuery

Question

То, что я делаю, это добавление класса ко всем элементам, которые имеют то же имя класса, что и идентификатор, над которым я наведу курсор. Например, когда я наведите курсор мыши на какой-либо элемент списка с идентификатором vowel, тогда будут действовать все элементы span с классом имени vowel (добавление класса).

Я могу сделать это без проблем. Но я хочу сделать то же самое для многих других имен идентификаторов с соответствующими именами классов. Примеры: согласные, полу-гласные, гортанные, нёбные и т. Д.

Я мог бы делать все это с разными функциями, но я хочу вызвать функцию, которая будет выполнять те же задачи, но будет достаточно умной, чтобы найти имя идентификатора и сгенерировать имя класса из этого.

Как извлечь имя идентификатора в переменную и присвоить его имени класса.

Answer 1

Вы можете использовать плагин:

$.fn.highlight = function() {
    return this.each(function() {
        $(this).hover(function() {
            var id = $(this).attr('id');
            $('.'+id).addClass('myclass');
        });
    });
}

Который вы могли бы назвать так:

$(document).ready(function() {
    $('span').highlight();
});

Answer 2

Вы можете сделать это:

$("[id]").hover(function() {
  $("." + this.id).addClass("highlight");
}, function() {
  $("." + this.id).removeClass("highlight");
});

но я не обязательно рекомендую это. Я был бы более склонен определить это статически:

var ids = ["vowels", "consonants"];
for (var i = 0; i < ids.length; i++) {
  $("#" + ids[i]).hover(function() {
    $("." + this.id).addClass("highlight");
  }, function() {
    $("." + this.id).removeClass("highlight");
  });
}

или что-то в этом роде.