我最近创建了一个jquery代码,如果它的href等于另一个元素,它应该隐藏一个元素,但是我无法使它工作......
HTML
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
CSS
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
JQUERY
var mainhref = $(".a a").attr('href');
if($("a", this).attr('href') == mainhref ) {
$(".a").hide();
}
else {
$(".a").show
}
答案 0 :(得分:4)
使用普通的javascript:D
let ar = document.getElementsByTagName('a'),
holdarray = [];
Array.from(ar, elem => {
if(holdarray.includes(elem.getAttribute('href')))
elem.parentNode.style.display = 'none'
else
holdarray.push(elem.getAttribute('href'))
})
.a { width:400px;height:100px;background-color:black; }
.thumb { width:400px;height:100px;background-color:green; }
.b { background-color:yellow; }
<div class="a" >
<a href="1"></a>
</div>
<div class="thumb">
<a href="1"></a>
</div>
<div class="thumb b">
<a href="2"></a>
</div>
答案 1 :(得分:2)
只需选择那个href(而父级不包含基础div的类'a')并隐藏它
$('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
var mainhref = $(".a a").attr('href');
var parentDiv = $('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" >
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
答案 2 :(得分:2)
您可以尝试这样做,只检查拇指类,然后它会隐藏包含相同href
的特定div
var mainhref = $(".a a").attr('href');
$('.thumb a').each(function(){
if($(this).attr('href') == mainhref)
{
$(this).parents('.thumb').hide();
}
});
答案 3 :(得分:1)
使用Jquery尝试这样的事情。
在每个a
上循环并存储href。选择所有<a>
但首先选择相同的href
并隐藏父
$("a").each(function(){
var href= $(this).attr("href");
$("a[href='"+href+"']").not(":first").parent().hide();
});
&#13;
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
&#13;
答案 4 :(得分:0)
你应该遍历所有元素。
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
答案 5 :(得分:0)
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});
答案 6 :(得分:0)
这是一个技巧,使用收音机:选中。
$($("a").toArray().reverse()).each(function(index, el){
var href = $(el).attr('href');
$(el).parent().before('<input type="radio" name="' + href + '" class="hidden" checked />');
})
我使用reverse
的原因是我希望第一个a
标记仍然显示。如果您希望保留最后一个a
代码,则可以使用$('a')
代替$($("a").toArray().reverse())
的CSS:
.hidden { display:none };
input[type=radio]+ div a { display: none };
input[type=radio]:checked + div a { display: block };
通过此技巧,您可以使用唯一a
制作所有href
标记。希望它可以帮到你。