Несколько селекторов с использованием переменных для селекторов ⇐ Jquery

[Anonymous]

В моей веб-таблице есть два столбца карточек (с использованием flex). каждый столбец находится в своем собственном контейнере.
У меня есть некоторый JS (с использованием jquery), который добавляет обработчики наведения мыши и мыши к картам в столбце 1, что соответственно добавляет и удаляет классы CSS. Оно работает! (хотя, вероятно, это плохая реализация).
Я понимаю, что jquery поддерживает несколько селекторов, например:

Код: Выделить всё

$("#selector1","#selector2"....).on("mouseover".......

поэтому я хочу добавить несколько селекторов (с использованием переменных), чтобы соседние карточки имели одинаковую функциональность.
примечание: объект JS card — это идентификаторы HTML-карточек (divs) в каждом столбце. итак, card1, card2... находится в первом контейнере, а JournalDesc, todoDesc...... во втором.
мой JS выглядит следующим образом:

Код: Выделить всё

  let cards = {
card1: "journalDesc",
card2: "todoDesc",
card3: "reminderDesc",
card4: "aboutDesc",
};

for (let card in cards) {
let el = document.getElementById(card);
let target = document.getElementById(cards[card]);
console.log(card + ", " + target.id);
$(el).on("mouseover", function () {
$(el).addClass("hover");
$(target).addClass("hover");
$(`#${this.id} .ellipse`).addClass("pulse");
});

$(el).on("mouseout", function () {
$(el).removeClass("hover");
$(target).removeClass("hover");
$(`#${this.id} .ellipse`).removeClass("pulse");
});
}

Я пробовал:

Код: Выделить всё

$(`${el}, ${target}`).on("mouseover".......

Я мог бы написать каждую из команд jQuery 1 к 1, охватывающую целевые объекты, но если я могу сделать это для одного единственного селектора, почему не для нескольких?

Подробнее здесь: https://stackoverflow.com/questions/797 ... -selectors