选择具有相同URL ID的类

Question

我在一个页面上有一个筛选器。当用户进入此页面时，如果他们有ID，则希望此筛选器触发该ID。

例如，如果id = event，则要触发事件筛选器。

是否有更流畅的方式显示这个操作，而不是显示每个单独的ID？

例如，以下内容正在工作：

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

但如果这是流体的，它将工作得更好。我真的需要说，如果URL有一个ID，那么找到具有相同类的按钮并触发此事件。

谢谢

- Brad

---

展示你的URL格式？ - BadPiggie

请分享您的URL格式。 - Piyush Jain

Answer 1

假设目标元素上的类始终与URL片段的内容匹配，则可以很简单地将其泛化：

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

- Rory McCrossan

---

或者在纯JavaScript中 - 就像我知道Rory已经知道的那样 - document.querySelector(\.btn.${target}`).click()`，但请记住，编程点击事件可能无法触发所需的事件（这取决于该事件是什么以及浏览器是否需要真正的用户交互）。 - David Thomas

嗨Rory，太棒了，谢谢！有一个小问题，点击函数不会触发，因为它生成的是：URL/#events/，但是，只需删除最后一个 / 就可以工作，所以：'URL/#events'。这也可以通过上述方式进行编辑吗？ - Brad

当然，这种情况下，您需要从片段中删除斜杠:fragment.substring(1).replace(/\//g, ''); - Rory McCrossan

太棒了，正是我所需要的。谢谢你，Rory！ - Brad

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'); 
   }
}

- Fabrizio Calderan

Answer 3

我建议：

1. 使用 window.location.search 获取Url中的ID，并将Id的值保存在新参数value_id中。

2. 之后，如果value_id不为空，您可以创建一般性函数：

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

- Dori

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'); 
}

- Suyash Jadhav