Question

当点击类名与隐藏div ID相同的项目时，我正在尝试显示div's。

问题是当我点击它时会显示所有这些而不是我点击的特定部分。

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

 $("#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

请勿使用each对其进行迭代，以便全部显示
使用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');
});

<强> Working Demo

Jquery显示div与匹配类

2 个答案: