可以说我有两种类型的div类ab,attr是data-type。当我单击adata-typetest1时,在b中所有不等于data-typetest1将被隐藏,只有左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

10-07 16:22
查看更多