将类添加到各种不同商店页面的 'body'

Question

我正在建立一家商店并尝试向三个页面添加不同的 body class。这是三个页面：

1) 主页：example.com/shop/

2) 项目页面：example.com/shop/model-xxxx/

3) 分类页：example.com/shop/?category=xxxx/

这是我试过的：

if (window.location.href.match(new RegExp('/shop/.+')) ) {

    jQuery('body').addClass('shop-item');

} else if (window.location.href.match('/shop/')) {

    jQuery('body').addClass('shop');

} else if (window.location.href.match('/shop/?category=')) {

    jQuery('body').addClass('shop-category');

}

理想情况下，/shop/ 页面应将 shop 的 class 添加到 body，/shop/model-xxxx/ 页面应将 class 的 shop-item 添加到 body，而 /shop/?category=xxxx/ 页面会将 shop-category 的 class 添加到 body。

前两个有效，但类别页面 shop-item 添加为 class 而不是 shop-category，因为该规则是在第一行定义的。

问题：如何确保 shop-category class 被添加到类别页面？

Answer 1

在您的第一条规则中使用 negative-lookahead。

if (window.location.href.match(new RegExp('/shop/(?!\?category).+')) ) {

    jQuery('body').addClass('shop-item');

} else ...

同时确保 URL 的第二部分不以 ?category

开头

Answer 2

不知何故，如果您在表达式周围使用引号，JS 不喜欢匹配转义的问号。

这已经过测试并且有效：

function checkUrl(url) {
  if (url.match(/\/shop\/\?category/)) {
    console.log(url, "-> category");
  } else if (url.match(new RegExp('/shop/.+'))) {
    console.log(url, "-> item");
  } else if (url.match('/shop/')) {
    console.log(url, "-> shop");
  }
}


checkUrl('exmaple.com/shop/');
checkUrl('exmaple.com/shop/?category=blub');
checkUrl('exmaple.com/shop/other');

将类添加到各种不同商店页面的 'body'

Adding classes to the 'body' of various different Shop pages

regex

jquery

squarespace

将 类 添加到各种不同商店页面的 'body'

Adding classes to the 'body' of various different Shop pages

regex

jquery

squarespace

将类添加到各种不同商店页面的 'body'