检测具有等于当前页面 url 的 href 属性的“a”标签

Question

我的任务包含几个步骤：

1. 隐藏页面中的所有链接
2. 检测具有等于当前页面 url 的 href 属性的链接元素
3. 显示此元素的邻居

我使用的html是这样的：

<div class="alllinkswrap">
  <a class="allproductsurls" href="blabla1.com">1</a>
  <a class="allproductsurls" href="blabla2.com">2</a>
  <a class="allproductsurls" href="blabla3.com">3</a>
  <a class="allproductsurls" href="blabla4.com">4</a>
  <a class="allproductsurls" href="blabla5.com">5</a>
</div>

我试图用display: none 隐藏所有链接元素，我只想显示当前链接顶部和底部的2 个链接。我使用的 jQuery 代码：

  $(docment).ready(function(){
  var thispageurl = window.location.href;
   $(".alllinkswrap").children().each(function(){
    if (this.href.indexOf(thispageurl)) 
     {
       $(this).next().show();
       $(this).prev().show();
       }
   });
  });

我猜这个错误出在$(this).next 的某个地方，等等。但对 jQuery 来说还是新手。你能发现问题吗？

Answer 1

原创

您的 indexOf(...) 需要检查非 -1，当未找到 thispageurl in this.href 时，它将返回 -1。或者你可以检查它是否等于 0，因为当找到目标链接时，它应该在索引 0 处找到。

更新

如果您确实想检查当前 URL 和目标 href 是否相等，我们需要在 Javascript 中使用 == 或 === 比较。这是因为当页面位于子目录中或您在域中时，我们会遇到问题。例如：

如果 thispageurl = http://url.com 和 this.href = http://url.com/page1.html 使用 this.href.indexOf(thispageurl) 将返回 0，但它不正确。如果我们在这种情况下反转 thispageurl.indexOf(this.href) 的索引，.indexOf() 返回 -1。同样，如果我们将thispageurl 和this.href 分别翻转为http://url.com/page1.html 和http://url.com，我们会遇到类似的情况，具体取决于我们采用的indexOf。

所以我更新了以下代码来检查字符串值是否相等。

var thispageurl = window.location.href;
$(".alllinkswrap").children().each(function(){$(this).hide()})

$(".alllinkswrap").children().each(function(){
  if (this.href === thispageurl) 
  {
    $(this).next().show();
    $(this).prev().show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="alllinkswrap">
  <a class="allproductsurls" href="blabla1.com">1</a>
  <a class="allproductsurls" href="blabla2.com">2</a>
  <a class="allproductsurls" href="http://stacksnippets.net/js">3</a>
  <a class="allproductsurls" href="blabla4.com">4</a>
  <a class="allproductsurls" href="blabla5.com">5</a>
</div>