Задать вопрос

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

Как указать 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 и т.д
  • Вопрос задан
  • 99 просмотров
Подписаться 1 Простой 3 комментария
Решения вопроса 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Правильнее будет изменить принцип, а не подстраиваться. Я так понимаю, нужно закрыть все блоки, кроме того, по которому кликнули?

<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();
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
NikFaraday
@NikFaraday
Student full-stack Developer
Можно сделать выборку по классам:
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)
Ответ написан
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
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();
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы