jQuery显示具有匹配类的div

Question

单击具有与隐藏的div's ID相同的类名的项目时，我试图显示div 。

问题是，当我单击它时会显示所有这些内容，而不是我单击的特定内容。

到目前为止，这是我的代码：

  $("#mixers").on("click", ".clear-tile", function() { $("#mixers li").each(function() { $('#' + $(this).attr('class')).removeClass('display-hide'); }); }); 

 .display-hide{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <ul id="mixers"> <li class="one"><span class="clear-tile">Show One</span></li> <li class="two"><span class="clear-tile">Show Two</span></li> <li class="three"><span class="clear-tile">Show Three</span></li> </ul> <div id="one" class="display-hide"><p>I'm One</p></div> <div id="two" class="display-hide"><p>I'm Two</p></div> <div id="three" class="display-hide"><p>I'm Three</p></div> 

Answer 1

1. 不要在它们之间迭代与each ，那将显示他们全部
2. 使用parent()遍历具有类标识符的li

 $("#mixers").on("click", ".clear-tile", function() { $('#' + $(this).parent('li').attr('class')).removeClass('display-hide'); }); 

 .display-hide { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <ul id="mixers"> <li class="one"><span class="clear-tile">Show One</span> </li> <li class="two"><span class="clear-tile">Show Two</span> </li> <li class="three"><span class="clear-tile">Show Three</span> </li> </ul> <div id="one" class="display-hide"> <p>I'm One</p> </div> <div id="two" class="display-hide"> <p>I'm Two</p> </div> <div id="three" class="display-hide"> <p>I'm Three</p> </div> 

Answer 2

您需要使用：

$("#mixers").on("click", ".clear-tile", function() {
   $('#' + $(this).parent().attr('class'))
        .toggleClass('display-hide')
           .siblings('div')
             .addClass('display-hide');
});

工作演示