Show/Hide jQuery，显示所有 div 而不是被点击的 div

Question

我正在尝试使用 jQuery show div，但我遇到的问题是显示了所有具有相同 class 的 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

使用.next()实现你想要的

$(this).next(".text-hidden").show()

这将 select 带有 class text-hidden 的下一个元素并显示它

示例如下。

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

.text-hidden {
  display: none
}

<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>

Answer 2

这将针对每个个匹配元素：

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

您想要的是从单击的元素遍历 DOM 以找到与该单击的元素相关的特定元素。从你的 HTML 看来，你想要的是 "next .text-hidden"，它应该是这样的：

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

Show/Hide jQuery，显示所有 div 而不是被点击的 div

Show/Hide jQuery, shows all of the divs instead of one that was clicked

javascript

jquery

show

hide