скрытие элементов с javascript против jquery

Question

Мне было интересно узнать, как скрыть элементы с помощью DOM. Ученик делает это, установив для дисплея значение none

document.getElementById("id-name-1").style.display = "none";
document.getElementById("id-name-2").style.display="none";

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

$(".dice").hide();

Это скрывает оба элемента одновременно, какой путь будет лучше? Я знаю, что если бы у меня были другие элементы с классными кубиками, это также скрыло бы их. Так может быть, поэтому другой путь лучше? Спасибо за ваши мысли - я новичок в этом.

Стивен

Answer 1

Если вы используете ваниль javascript, можете сделать что-то вроде

document.getElementsByClassName('className').forEach(el => el.style.display = "none")

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

Answer 2

Document.querySelectorAll (". Dice") также сможет описывать вышеизложенное на основе стиля, используя чисто javascript. Таким образом, все сводится к предпочтению, поскольку он работает так же, как с display: none ;. Кроме того, .hide () принимает дополнительные аргументы / функции обратного вызова, которые могут помочь скрыть элемент (ы).

Answer 3

Ваш вопрос открыт. Нет правильного или неправильного ответа.

$(".dice").hide();

Как уже упоминалось, это скроет все элементы с классом "кости". Если вы хотите быть более точным c, вы можете:

$("#id-name-1", "#id-name-2").hide();

Этот селектор использует идентификаторы и выбирает оба элемента.

Ваш селектор может быть более расплывчатым или более точным по мере необходимости .

Подробнее: https://api.jquery.com/category/selectors/basic-css-selectors/