通过 jQuery 检查页面标题是否在数组中

Question

我通过在每个页面上使用以下内容（例如）在静态网站上创建了半动态页面标题：

<?php $title="Example"; ?>

并将其添加到我的头文件中：

<title>Company Name Here<?php if ($title!="") { echo " | $title"; } ?></title>

那部分运行良好。

现在，我想使用 jQuery 检查 ACTIVE 页面的页面标题是否在一个数组中，以便（如果是）我可以将一个类应用于一个或两个导航元素。而且，如果它不在数组中，我会删除该类。像这样（在部分伪代码中）：

if $(title) of currently visible page is in this array(about, page2, page3) {
     $('a#idname').addClass('selected')
} else {
     $('a#idname').removeClass('selected')
}

也许有更好的方法来做到这一点。我愿意接受建议。我只是不太清楚确定的语法：

1. 当前加载了什么页面
2. 如何在页面加载后使用当前页面的某些标识符来更改页面上元素的类。我知道如何在点击时执行此操作，但是一旦页面加载，该类就消失了。

非常感谢任何帮助。提前致谢！

Answer 1

您可以通过访问document 对象document.title 上的title 属性来检索文档的标题。为了获取管道之后的字符串部分|，您可以简单地将标题拆分为| 字符，然后获取返回数组中的第二个元素。

如果页面标题是“Company Name Here | About”，就像您的问题一样，那么document.title.split('|') 将返回数组["Company Name Here ", " About"]，因此.split('|')[1] 将返回字符串“About”。

使用.indexOf() method 来检查title 字符串是否在数组titleArray 中，然后相应地添加/删除类。

这是一个基本的例子：

var title = document.title.split('|')[1];
var titleArray = ['About', 'Page2', 'Page3'];

if (title && titleArray.indexOf(title.trim()) > -1) {
  $('span').addClass('selected');
} else {
  $('span').removeClass('selected');
}

.selected { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Company Name Here | About</title>
<span>The title is in the array if this is red.</span>