Question

很显然，让事情在后台失败是不好的，但是看来这是使这个示例始终如一地工作的唯一方法。我该如何解决？

有时候，我需要检查某些页面上带有数据属性的div，如果匹配则添加一个类。其他时候，我需要检查URL是否包含字符串并将其附加到标题。

在没有数据属性可检查的页面上，它引发：

scripts.js：88未捕获的TypeError：无法读取未定义的属性“ 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>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>

根据我对return: false;和How do I prevent, stop, or kill Javascript function?的了解，您可以使用它不运行函数，并且在这种情况下，请停止运行检查并在控制台中引发错误。

解决这个问题的最佳方法是什么？

Answer 1

所以不要在一排中把它分成两部分。

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

未定义的.toLowerCase（）在后台静默失败-但代码仍然可以正常工作

1 个答案: