将正文 class 添加到基于 URL 的页面列表

Question

我想将正文 class 添加到具有特定 URL 的页面列表中。 For example, if the URL is /page1.html, /page2.html, /page3.html, /page4.html etc. etc. I would like to add a class to the body tag.

我的代码有效，但非常臃肿。 有没有办法更优雅地写这个？ 总而言之，我需要检查 10 个不同的 URL。

(function($) {
    if ( document.location.href.indexOf('page1.html') > -1 ||
         document.location.href.indexOf('page2.html') > -1 || 
         document.location.href.indexOf('page3.html') > -1 ||
         document.location.href.indexOf('page4.html') > -1 ) {
             $('body').addClass('testclass');
    }
}(jQuery));

它可以是 jQuery 或香草 JavaScript。

Answer 1

你可以这样做： -

const pages = ['page1.html', 'page2.html', 'page3.html', 'page4.html'];

(function($) {
    pages.forEach(item => {
        if(document.location.href.indexOf(item) >=0)  {
            $('body').addClass('testclass');
        }
    });
}(jQuery));

Answer 2

将 url 添加到数组并循环遍历数组：

var urls = ["page1.html", "page2.html", "page3.html", "page4.html"];
var href = document.location.href;
for (var i=0; i<urls.length; ++i) {
    if (href.indexOf(urls[i]) > -1)  {
      $('body').addClass('testclass');
    }
}

如果页面都是相同的格式，只有一个数字，你可以动态地构建它们，但你对添加/删除页面的控制较少，例如：

var href = document.location.href;
for (var i=1; i<=4; ++i) {
    if (href.indexOf("page" + i + ".html") > -1)  {
      $('body').addClass('testclass');
    }
}

使用数组操作来格式化这些格式有更好的方法，但概念是相同的。

Answer 3

我认为最优雅的方法是使用Array.some()

(function($) {
    const pages = ['page1.html', 'page2.html' /* add whatever here */];

    if (pages.some(page => document.location.href.indexOf(page) > -1)) {
       $('body').addClass('testclass');
    }
}(jQuery));

Answer 4

另一种方式

const pages = ['page1.html', 'page2.html', 'page3.html', 'page4.html'];

$('body').addClass(pages.find(page => ($(location).attr('pathname').includes(page))) && 'testclass');