可以说我有两种类型的div类a
和b
,attr是data-type
。当我单击a
且data-type
为test1
时,在b
中所有不等于data-type
的test1
将被隐藏,只有左div属性为test1
。任何想法如何做到这一点?
$(".a").click(function () {
var a_datatype = $(this).attr("data-type");
var b_datatype = $(".b").attr("data-type");
if(a_datatype ! = b_datatype){
$(".b").hide();
}
});
.a{
float:left;
cursor:pointer;
}
.a:hover{
background:#000;
color:#fff;
}
.b{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" data-type="test1">Name1</div>
<div class="a" data-type="test2">Name2</div>
<div class="a" data-type="test3">Name3</div>
<div class="b" data-type="test1">NewName1</div>
<div class="b" data-type="test1">NewName2</div>
<div class="b" data-type="test2">NewName3</div>
<div class="b" data-type="test2">NewName4</div>
<div class="b" data-type="test3">NewName5</div>
<div class="b" data-type="test3">NewName6</div>
最佳答案
您可以尝试以下方法:
var a_datatype = $(this).data("type");
$(".b:not([data-type='" + a_datatype + "'])").hide();
$(".b[data-type='" + a_datatype + "']").show();
见Fiddle