我的任务包含几个步骤:
- 隐藏页面中的所有链接
- 检测具有等于当前页面 url 的 href 属性的链接元素
- 显示这个元素的邻居
我使用的 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 来说还是新手。你能发现问题吗?
最佳答案
原创
您的 indexOf(...) 需要检查是否不是 -1,当在 this.href
中找不到 thispageurl
时,它将返回 -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>
关于javascript - 检测到一个 'a' 标签,其 href 属性等于当前页面的 url,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27135377/