JQuery 根据页面 url/name 更改具有 id 或类的元素类

Question

这是我的代码

HTML

<div id="header-content" class="header-content">...</div>

jQuery

    $( document ).ready(function() {



      var loc = window.location.href; // returns the full URL
      if(/$/.test(loc)) { // If Empty or if just home URL
        $('#header-content').addClass('home-page');
        //Remove All Other Classes
        $('#header-content').removeClass('start-here');
        $('#header-content').removeClass('work-with-me');
      }
      if(/start-here$/.test(loc)) { // if page = root/start-here/
        $('#header-content').addClass('start-here');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('work-with-me');
      }
      if(/work-with-me$/.test(loc)) { // if page = root/work-with-me/
        $('#header-content').addClass('work-with-me');
        //Remove All Other Classes
        $('#header-content').removeClass('home-page');
        $('#header-content').removeClass('start-here');
      }


    });

网址示例： http://www.somedomain.com/the-page/

我想做的是让脚本识别 url 中的文本“the-page”，如果匹配则分配类。正如您在我的示例 jquery 代码中看到的那样，我正在尝试将类分配给主页、从这里开始的页面和与我一起工作的页面。

我不确定如何修改上面的 Jquery，以便它可以使用 URL 示例格式。

以及我如何检测它是否是索引页面并且 URL 看起来像这样：http://www.somedomain.com/ 最后没有页面名称？

Answer 1

好吧，假设域是已知的，它应该是可行的：

//you'll of course want to get this via window.location.href instead:
var exLoc = "http://www.somedomain.com/the-page/";

var root = "somedomain.com";
var end = exLoc.slice(exLoc.lastIndexOf(root)+root.length);

//end is your "text" at the end of your domain (somedomain.com in this case)

其中，使用您的示例看起来像：

$( document ).ready(function() {

  var loc = window.location.href; // returns the full URL
  var root = "somedomain.com";
  var end = loc.slice(loc.lastIndexOf(root)+root.length);

  if(end.length <= 0) { // If Empty or if just home URL
    $('#header-content').addClass('home-page');
    //Remove All Other Classes
    $('#header-content').removeClass('start-here');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/start-here/") { // if page = root/start-here/
    $('#header-content').addClass('start-here');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('work-with-me');
  }
  if(end === "/work-with-me/") { // if page = root/work-with-me/
    $('#header-content').addClass('work-with-me');
    //Remove All Other Classes
    $('#header-content').removeClass('home-page');
    $('#header-content').removeClass('start-here');
  }


});