Javascript 如果图像和url包含相同的单词，我可以添加一个类吗？

我有一个有趣的想法，但也许（或者更确切地说）对你来说并不新鲜

我在主页上有一个基于图像的菜单。也就是说，数百张图片。当用户浏览到某个URL，然后再次打开下拉列表（包含图像）时，我希望URL图像有一个框架

例如，用户在my-homepage.com/flowers上，图像“#flowers”从类中获取帧

我知道我可以做到这一点，效果非常好：

jQuery(function() {
  var loc = window.location.href;
  if(/my-url/.test(loc)) {
    jQuery('#my-image').addClass('active-image-url');
  }
});

.active-image-url {border: 1px solid #000;}

但是，我有几百张图片，所以如果再加上一百次代码，那就太疯狂了。 是否有一种方法可以比较URL和图像ID，如果它们相同，则添加类？例如，如果URL my-homepage.com/flowers的一部分部分等于“#flowers”，请添加类

我知道不是这样，但为了解释清楚：

jQuery(function() {
  var loc = window.location.href;
  if(/flowers/.test(loc)) {
    jQuery('#flowers').addClass('active-image-url');
  }
});

你认为这能做到什么？也许这是一个JavaScript任务

致以最良好的祝愿，

---

Skt

您可以像以前一样获取URL或href的路径，按“/”将字符串拆分为一个数组，并使用数组的最后一个元素查询HTML元素。大概是这样的：

const path = window.location.pathname;

const words = path.split('/');

jQuery(`#${word[words.length - 1]}`).addClass('active-image-url');

---

当然可以，不过后端处理它会更有意义。URL是否总是相同的结构，例如：

https://example.com/flowers

？顺便说一句，拥有一个包含数百个图像的菜单对于性能、可访问性、维护等来说可能是一个非常糟糕的主意……我夸大了图像的数量。它们最多有50个左右。还有很多，但可以管理。我会选择像example.com/flowers这样的短URL，但我想可以尝试捕捉最后一个字符串？但我猜是从左边搜索，所以这可能不起作用。你能再解释一下URL中要匹配的内容吗。你提到了URL的“部分”，这是指任何部分还是仅仅是最后一部分？它是你想要匹配的全部id吗？它是用来匹配整个URL的一部分吗？它可以是一个包含多个字符串的URL，但不一定。我会调整它以使这个想法发挥作用。哇，这看起来很棒。但出于某种原因，它对我不起作用。它是在搜索整个URL吗？pathname会获取主机后面的内容，在您的示例中，“my homepage.com/flowers”是href，“my homepage.com”是主机，“/flowers”是路径。试着把整个房间都拿走。它应该仍能正常工作。我尝试使用'getElementById'而不是jQuery。我很想帮你，但我不确定如何使用。getElementById很容易使用。它只找到第一个以给定id作为参数的HTML元素，与使用jQuery的方式类似。在这种情况下，语句将变成

getElementById（`${word[words.length-1]}）。addClass（'active-image-url'）；

请注意，#符号不包括在内。如果卡住了，您也可以尝试用谷歌搜索示例。使用

const word=path.split（'/'）.pop（）；

？然后您会得到与

words[words.length-1]相同的结果

在

word

中，您是否尝试通过控制台日志检查变量是否按预期分配？