javascript - if 语句逻辑未产生期望的结果

Question

我有一个名为“服务”的页面。当您从导航菜单转到该页面时，我不希望显示任何服务(太复杂，无法解释)。然后在我的索引页面上有每种类型服务的链接。如果您单击链接，它将带您进入服务页面并仅显示该服务。

对于各个服务链接，它们如下所示:

<a href="serviceCheck2#service1">Service 1</a>
<a href="serviceCheck2#service2">Service 2</a>
<a href="serviceCheck2#service3">Service 3</a>

这个系统的这个方面是有效的。它会将我带到服务页面，并且仅显示我从链接中单击的服务。

不起作用的部分是不显示服务或导航菜单中的service-display-box。现在所有服务都会显示，service-display-box 也会显示。

我尝试创建逻辑来防止这种情况发生，但它不起作用。在下面的 javascript 中，您将看到类似 //added 的注释，这是我添加的内容，用于尝试创建显示 service-display-box 和特定服务的逻辑如果浏览器中存在哈希值，则项目，否则根本不会显示 service-display-box。

我的逻辑有什么问题吗？

$(function(){

    //get the section name from hash
    var sectionName = window.location.hash.slice(1);

    if (sectionName != null) { //added
    //then show the section
     $('#service-display-box').show();
     $(window.location.hash).show().scroll().siblings().hide();
    } else { //added
        $('#service-display-box').hide(); //added
    } //added
})

#service-display-box {
    display: none;
}
<div id="service-display-box">
      <div id="service-display-box-container">
        <div class="service-item-box" id="service1">
          <div class="service-item-title">1</div>
          <h2 class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service2">
          <div class="service-item-title">2</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service3">
          <div class="service-item-title">3</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service4">
          <div class="service-item-title">4</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <h2 class="service-item-box" id="service5">
          <div class="service-item-title">5</div>
          <div class="service-item-description"> Service/div>
        </h2>
        <h2 class="service-item-box" id="service6">
          <div class="service-item-title">6</div>
          <div class="service-item-description"> Service</div>
        </h2>
        <div style="clear:both;"></div>
        <div id="service-top"><span id="service-top-border">Back to all services</span></div>
      </div>
    </div>

我也尝试过

if (sectionName > 1) {

Answer 1

window.location.hash.slice(1) 返回一个空字符串，它与 null 不同。我认为您想检查 .length == 0 。