检测到一个' a'带有href属性的标记,该属性等于当前页面的url

时间:2014-11-25 19:47:11

标签: javascript jquery html

我的任务包含几个步骤:

  1. 隐藏页面中的所有链接
  2. 检测具有等于当前页面网址的href属性的链接元素
  3. 显示此元素邻居
  4. 我正在使用的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的新手。你能发现问题吗?

1 个答案:

答案 0 :(得分:2)

原创

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

<强>更新

如果您确实要检查当前网址和目标广告系列是否相等,我们需要在Javascript中使用=====比较。这是因为当页面在子目录中时或者如果您在域中时,我们会遇到问题。例如:

如果thispageurl = http://url.comthis.href = http://url.com/page1.html,则使用this.href.indexOf(thispageurl)将返回0,但这不正确。如果我们在该场景中反转thispageurl.indexOf(this.href)的索引,.indexOf()将返回-1。同样,如果我们分别将thispageurlthis.href转换为http://url.com/page1.htmlhttp://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>