代码之家 › 专栏 › 技术社区 › kawnah

.tolowercase()的未定义的后台自动失败-但代码仍然可以正常工作

html jquery javascript

-1

kawnah · 技术社区 · 6 年前

显然,让事情在后台失败是不好的,但这似乎是让这个例子始终如一地工作的唯一方法。我该怎么解决这个问题?

有时,我需要在某些页面上检查一个带有数据属性的DIV,如果匹配,就添加一个类。其他时候,我需要检查URL是否包含一个字符串,并将其附加到一个头部。

在没有要检查的数据属性的页面上,它将引发:

scripts.js:88未捕获类型错误:无法读取未定义的“ToLowerCase”属性

因为没有要检查的数据属性。

一切都是这样的:

$(window).on("load", function() {
// highlight relevant menu item
  if (window.location.href.indexOf("stackoverflow") > -1) {
    $(".main-header--light").text("STACKOVERFLOW");
  }
  var tagName = $("#content").data("category").toLowerCase();
  $(".nav-item").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (menuItem == tagName) {
      console.log(this);
      $(this).addClass("subnav-active");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>HEADER - <span class="main-header--light"></span></h1>

<div id="content"></div>
<ul>
<li class="nav-item">11</li>
<li class="nav-item">2</li>
<li class="nav-item">34</li>
<li class="nav-item">44</li>
</ul>

此代码工作正常,并且在 window.location.href.indexOf 头会更新,如果有数据属性要读取,它也会工作。但现在您可以看到下一个函数错误,因为没有要读取的数据。

请参阅以下完整版本:

$(window).on("load", function() {
// highlight relevant menu item
  if (window.location.href.indexOf("stackoverflow") > -1) {
    $(".main-header--light").text("STACKOVERFLOW");
  }
  var tagName = $("#content").data("category").toLowerCase();
  $(".nav-item").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (menuItem == tagName) {
      console.log(this);
      $(this).addClass("active");
    }
  });
});

.active {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>HEADER - <span class="main-header--light"></span></h1>

<div id="content" data-category="Highlight This Item"></div>
<ul>
<li class="nav-item">11</li>
<li class="nav-item">2</li>
<li class="nav-item">Highlight This Item</li>
<li class="nav-item">44</li>
</ul>

我试图理解什么是最好的方法让这项工作持续下去,这样就不会出现错误。我尝试过类似这样的if-else语句:

$(window).on("load", function() {
// highlight relevant menu item
  if (window.location.href.indexOf("stackoverflow") > -1) {
    $(".main-header--light").text("STACKOVERFLOW");
  }
  var tagName = $("#content").data("category").toLowerCase();
  $(".nav-item").each(function() {
    var menuItem = $(this).text().toLowerCase();
    if (tagName === "undefined") {
      return false;
    } 
    else if (menuItem == tagName) {
      console.log(this);
      $(this).addClass("subnav-active");
    } else {};
  });
});

<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<h1>标题-<span class=“main header--light”></span></h1>

<DIV id=“content”></DIV>
& UL & GT;
<li class=“nav item”>11</li>
<li class=“nav item”>2</li>
<li class=“nav item”>34</li>
<li class=“nav item”>44</li>
&L/UL & GT;

据我所知 return: false; 和 How do I prevent, stop, or kill Javascript function? 您可以使用它来不运行函数,在这个上下文中,停止它运行检查并在控制台中抛出错误。

解决这个问题的最佳方法是什么?保持干净/没有错误?

1 回复 | 直到 6 年前

epascarello 6 年前

所以不要把它分成一行,分成两行。

var tagName = $("#content").data("category")
if (tagName) {
  tagName = tagName.toLowerCase();
  $(".nav-item").each(function() {
    ...
  })
}