Как указать класс в скрипте так, чтобы он завершался любой цифрой?

Как указать класс jQuery с опциональной цифрой в конце или перечислить несколько классов? Например, мне нужно взаимодействовать с классами filter-block, filter-block2, filter-block3 и так далее. Как это можно сделать в представленном скрипте?
  • 22 февраля 2024 г. 13:28
Ответы на вопрос 3
Для указания класса в скрипте с опциональной цифрой в конце вы можете использовать специальный селектор в jQuery, например:

```javascript
$('div[class^="filter-block"]')
```

Этот селектор будет выбирать все элементы `<div>` с классами, начинающимися на "filter-block", независимо от цифры в конце.

Если вам нужно взаимодействовать с несколькими классами, например, с filter-block, filter-block2, filter-block3 и так далее, вы можете использовать селектор jQuery с несколькими классами:

```javascript
$('.filter-block, .filter-block2, .filter-block3')
```

Этот селектор выберет все элементы, имеющие классы filter-block, filter-block2 и filter-block3.

Таким образом, вы можете использовать специальные селекторы и комбинации классов для выбора нужных элементов в вашем скрипте.
Можно сделать выборку по классам: 
let items = document.querySelectorAll("[class^='filter-block']")
let items.forEeach(item => {
    // ...
});


[class^='filter-block'] означает, что вы будете делать выборку по всем элементам, у которых значение указанного аттрибута (В нашем случае, мы указали аттрибут class ) будет начинаться (Это делается при помощи такой конструкции как ^= ) с указанного значения (Мы указали filter-block ), после которого могут следовать другие символы (Т.е. filter-block2 , filter-block-filter-block-filter-block , filter-block-123 , filter-blockkkkkkkkkkkkkkkkk и так далее, это всё будет проходить через выборку, т.к. имеет общее начало filter-block )
Я наверное не правильно изъяснился, мне нужно что бы получилось так 
$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter").length) {
    $('.filter-block').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter2").length) {
    $('.filter-block2').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter3").length) {
    $('.filter-block3').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter4").length) {
    $('.filter-block4').hide(); 
  }
  e.stopPropagation();
});

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter5").length) {
    $('.filter-block5').hide(); 
  }
  e.stopPropagation();
});

этот код конечно не правельный, но смысл такой. Каждый class .filter{0-9] должен взаимодействовать с .filter-block{0-9]
Похожие вопросы