javascript - 单击即可使用 jquery 更改 div 的 CSS

Question

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

开始时，我需要在主 div 类中显示几个具有不同 div 类名的类，这些类可以是 ID。 现在，单击 anchor 后，我将获取该类名，并让该主 div 内的所有其他类都需要可见。 所有类都将以唯一的名称开头，例如marker_automobile、marker_sample-class等。

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

抱歉我的英语不好。

Link to 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 元素再次可见。试试这个:

 $(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
    });
});

<强> DEMO