单击更改与jQuery的div的CSS

Question

我需要有关单击功能的帮助。

首先，我需要在可以是ID的主div类中显示几个具有不同div类名的类。 现在单击锚点，我将获取该类名，并将所有其他类保留在该主div中，这是可见的。 所有类都将以唯一的名称开头，例如marker_automobile，marker_sample-class等。

现在，单击marker_automobile，需要隐藏marker_sample-class等，并且只需要显示marker_automobile。 现在，单击marker_sample-class，所有其他类都希望将其隐藏。

对不起，我的英语不好。

链接到jsfiddle

<a href="#" class="changer" data="data1">Data1</a>
<a href="#" class="changer" data="data2">Data2</a>
<a href="#" class="changer" data="data3">Data3</a>

<div id="content">
  <div class="data1">
    content 1
  </div>
  <div class="data1">
    content 2
  </div>
  <div class="data2">
    content 3
  </div>
  <div class="data3">
    content 4
  </div>
  <div class="data1">
    content 5
  </div>
</div>


$(document).ready(function(){

   $(".changer").click(function() {
       var data = $(this).attr("data");
       $("."+data).css( "display", "none" );
    });

});

Answer 1

问题是因为连续单击该按钮时，您不会使所有div元素再次可见。 同样， data不是有效的属性。 在我的示例中，我将您的HTML更改为使用data-*属性。 尝试这个：

<a href="#" class="changer" data-rel="data1">Data1</a>
<a href="#" class="changer" data-rel="data2">Data2</a>
<a href="#" class="changer" data-rel="data3">Data3</a>

$(".changer").click(function () {
    $('#content div').show(); // show all elements again
    $("." + $(this).data('rel')).hide(); // hide the related ones only
});

更新小提琴

Answer 2

单击按钮时，应再次使所有div元素可见。 尝试这个：

 $(document).ready(function(){ 
   $(".changer").click(function() {
       $("div[class^=data]").show(); //show all divs
       var data = $(this).attr("data");
       $("div[class^=data]").not("."+data).css("display","none");//hide button 
       related ones
    });
});

演示