Выберите класс с таким же идентификатором URL

Question

У меня есть фильтр на одной странице. Когда пользователь входит на эту страницу, если у него есть идентификатор, я хочу, чтобы этот фильтр вызывал этот идентификатор.

Например, если событие id =, я хочу, чтобы фильтр событий запускал.

Есть ли более гибкий способ показать это, вместо того, чтобы показывать каждый отдельный идентификатор?

Например, это работает ниже: -

    if ( document.location.href.indexOf('#events') > -1 ) {
        $(".btn.events").trigger('click'); 
    }
    if ( document.location.href.indexOf('#video') > -1 ) {
        $(".btn.video").trigger('click'); 
    }

Но это будет работать намного лучше, если это будет жидкость. Мне действительно нужно сказать, если URL имеет идентификатор, а затем найти кнопку с тем же классом и вызвать это событие.

Спасибо

Answer 1

Предполагая, что класс на целевом элементе (элементах) всегда совпадает с содержимым фрагмента URL, вы можете обобщить это довольно просто:

var fragment = window.location.hash;
if (fragment) {
  var target = fragment.substring(1);
  $(".btn." + target).trigger('click'); 
}

Answer 2

Установить массив возможных / разрешенных хэшей, затем динамически составить селектор

var myhash =  ['#events', '#video', ... ];
var hash = location.hash;

if (myhash.includes(hash)) {
   var el = $(".btn." + hash.substring(1));
   if (el.length) {
       el.trigger('click'); 
   }
}

Answer 3

Что я бы предложил:

1. Получить ID из URL, используя: window.location.search и сохранить значение Id в новом параметре value_id.

2. После этого Вы можете создать общую функцию, если value_id не пусто:

   $ (". btn." + value_id) .trigger ('click');

Answer 4

Не знаю точный шаблон URL. Этот фрагмент кода будет работать при условии, что у вас есть параметры запроса.

const currentUrl = new URL(location.href);
const queryParams = currentUrl.search;
const searchParams = new URLSearchParams(queryParams);
const searchId = (searchParams && searchParams.has("id") && searchParams.get("id")) || "";
if(searchId) {
  const ele = [".btn", searchId].join(".");
  $(ele).trigger('click'); 
}