Question

假设我有两种div类a和b，attr是data-type。当我点击a data-type为test1时，在b所有data-type不等于test1将被隐藏，只剩下div attr是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>

Answer 1

你可以试试这个：

var a_datatype = $(this).data("type");

$(".b:not([data-type='" + a_datatype  + "'])").hide();
$(".b[data-type='" + a_datatype  + "']").show();

请参阅Fiddle

Answer 2

您可以使用.filter()，使用回调变体：

$('.a').on('click', function(e) {
    var type = $(this).data('type');
    $('.a, .b').filter(function() {
         return $(this).data('type') != type;
    })
    .hide();
});

Answer 3

此处，b_datatype将始终等于'test1'，因为有多个$('.b')因此它会选择第一个$(".a").click(function () { var a_datatype = $(this).attr("data-type"); // here, use .show to reset all of them to visible $(".b").show().filter(function(){ return a_datatype != $(this).attr("data-type"); }).hide(); });。您需要过滤每一个：

{{1}}

JS Fiddle Demo

Answer 4

尽管我更喜欢@blex和@giorgio提供的解决方案，但这里有一个代码片段没有过滤器，只是为了提供一些变化：

$(".a").click(function () {
        var this_datatype = $(this).attr("data-type");
    $('.b').each(function(i, v) {
        $(this).attr('data-type') != this_datatype ? $(this).hide() : $(this).show();
    });
 });

略有不同的方法，但仍然有效：

http://jsfiddle.net/r08dm2um/2/

当它包含不相等的attr时隐藏div

4 个答案:

JS Fiddle Demo