检测一个带有href属性的"a"标签，其值等于当前页面的URL。

Question

检测一个带有href属性的"a"标签，其值等于当前页面的URL。

3

我的任务包含以下几个步骤：

隐藏页面中的所有链接
检测具有 href 属性且等于当前页面 URL 的链接元素
显示该元素的相邻元素

我正在使用的 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 隐藏所有链接元素，现在只想展示当前链接前后的两个链接。我使用的 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还很陌生。您能检测出问题吗？

- whatzi77

那么，如果当前网站是 blabla3.com，您想显示 blabla2.com 和 blabla4.com 吗？ - David Thomas

如果 window.location.href == this.href，.indexOf() 将返回 0；你的条件将是 'falsey'。 - George

当然。为了举例，我们就这样做吧。 - whatzi77

@George window.location.href将始终是完整的URL，以http://domain.com/path开头。因此，indexOf永远不会返回0。 - Barmar

@Barmar 不是的，你说的是 window.location.href，我在谈论锚点元素的 href 属性。 - George

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arthur Weborg · Accepted Answer

Translated

你的indexOf（...）需要检查不等于-1，因为当thispageurl未在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>