Как в скрипте указать class с любой цифрой на конце?

Question

[Александр]

Как указать class с любой цифрой на конце или их перечислить?

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

в данном скрипте мне нужно указать class filter-block с любой цифрой на конце или их перечислить. Т.е нужно чтобы он взаимодействовал с filter-block, filter-block2, filter-block3, filter-block4, filter-block5 и т.д

Comments

[Lynn «Кофеман»]

https://doka.guide/css/attribute-selector/

[class^=filter-block]

[Ivan Ustûžanin]

или прямо так и перечислить через запятую: https://doka.guide/css/selector-list/

[Александр]

Я наверное не правильно изъяснился, мне нужно что бы получилось так

$(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]

Answer 1

[Сергей delphinpro]

Правильнее будет изменить принцип, а не подстраиваться. Я так понимаю, нужно закрыть все блоки, кроме того, по которому кликнули?

<div class="filter" data-id="1">
<div class="filter-block" data-target="1">

<div class="filter" data-id="2">
<div class="filter-block" data-target="2">

<div class="filter" data-id="3">
<div class="filter-block" data-target="3">

$(document).on('click', function(e) {
  let $f = $(e.target).closest(".filter");
  if ($f.length) {
    let id = $f.data('id');
    $('.filter-block:not([data-target="'+id+'"])').hide(); 
  }
  e.stopPropagation();
});

Comments

[Александр]

Да всё верно вы меня поняли, только при таком методе при клике в не блоков они остаются открытыми, т.е чтобы закрылся блок нужно по немуже и кликнуть

[Сергей delphinpro]

Александр, ну допишите условие

$(document).on('click', function(e) {
  let $f = $(e.target).closest(".filter");
  if ($f.length) { // Закрыть все кроме
    let id = $f.data('id');
    $('.filter-block:not([data-target="'+id+'"])').hide(); 
  } else { // закрыть все
    $('.filter-block').hide(); 
  }
  e.stopPropagation();
});

[Александр]

Сергей delphinpro, Огромное спасибо!

Answer 2

[Nik Faraday]

Можно сделать выборку по классам:

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)

Comments

[Сергей delphinpro]

Следует уточнить, что такой селектор не сработает для class="other-class filter-block1"
или даже для class=" filter-block1"

[Nik Faraday]

Сергей delphinpro, да, верно. Этот селектор будет выбирать все классы, которы имеют общее начало, которое указанно при выборке

Answer 3

[ThunderCat]

1) Использовать регулярки, определяя какой блок какому пренадлежит.
2) Сделать нормально через дата-атрибуты, тогда будет что-то типа:

$(document).on('click', function(e) {
  if (!$(e.target).closest(".filter").length) {
    let filterNum = $(e.target).data('num');
    $('.filter-block' + filterNum).hide(); 
  }
  e.stopPropagation();
});

Comments

[Александр]

что то наподобие я делал, но оно вообще не работает.

[ThunderCat]

Александр, В программировании не бывает "не работает". Бывает "ошибка", которую надо исправить, или код, который работает, но делает то что написано, а не то что вам хотелось бы от него получить. Так что скорее всего проблема не в коде, а в реализации.