javascript - 显示/隐藏 jQuery，显示所有的 div 而不是被点击的

Question

我正在尝试使用 jQuery show div，但我遇到的问题是所有具有相同类的 divs 都被显示了，而不是原来显示的那个点击。

所以基本上，一旦 VIEW MORE 被点击，div 应该可见并且 VIEW MORE 应该被隐藏，然后如果 VIEW MORE在另一个 div 中单击，同样的事情也应该在那个 div 中发生。

$('.show-more').click(function() {
  $('.text-hidden').show();
  $(this).hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="forms">
  <h2>New Forms</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<span class="show-more">VIEW MORE</span>
<div class="forms text-hidden">
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

<div class="forms">
  <h2>Old Forms</h2>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>
<span class="show-more">VIEW MORE</span>
<div class="forms text-hidden">
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

我不是 jquery/javascript 的专家，所以请多多包涵。

谢谢

Answer 1

这将针对每个 匹配元素:

$('.text-hidden').show();

您想要的是从被点击的元素遍历 DOM 以找到与被点击的元素相关的特定元素。从您的 HTML 来看，您想要的似乎是“下一个 .text-hidden”，它应该是这样的:

$(this).next('.text-hidden').show();