javascript - 将 url 文件夹与标签 href 匹配以使其处于事件状态

Question

我在某些网址上为我的菜单设置了事件状态。我有这样的网址:

• /products/other-clothing/sporting/adults-anzac-australia-polo
• /products/other-clothing/sporting/adults-nz-tee
• /products/bags/backpacks

我的代码从 / 之后获取文件夹，所以其他服装、运动等。它工作正常，我只是假设有一种更有效的方法来编写代码。

这是我的代码:

jQuery(".product-nav li a").each(function() {
  // URL url
  var cat = location.pathname.split("/")[2];
  var subcat = location.pathname.split("/")[3];
  var c = "/products/" + cat + "/" + subcat;

  // A tag url
  var acat = this.href.split("/")[4];
  var asubcat = this.href.split("/")[5];
  var e = "/products/" + acat + "/" + asubcat;

  if(e == c) {
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().parent().parent().addClass("active");
  }
});

如果有人能提供一种更简洁的代码编写方式，那就太好了。我可能不需要 "/products/"+。

Answer 1

注意以下表达式的输出:

$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>')[0].href;
/*
 * http://stackoverflow.com/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */
$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>').eq(0).attr('href');
/*
 * /questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */

因此，如果您的 <a>标记包含以 / 开头的 URL然后你可以比较.attr('href')与 location.pathname .为了进行测试，请尝试从此页面在控制台中运行它:

$('a').each(function () {
    if ($(this).attr('href') == location.pathname) {
        $(this).css({
            'font-size': '40px',
            'background-color': 'lime'
        });
    }
});