显示/隐藏jQuery,显示所有div而不是单击的div

时间:2017-07-17 11:57:37

标签: javascript jquery hide show

我正在尝试使用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的大专业人员,所以请耐心等待。

由于

2 个答案:

答案 0 :(得分:3)

这将定位每个匹配元素:

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

您想要的是从被点击的元素遍历DOM以查找相对于该被点击元素的特定元素。在你的HTML中,看起来你想要的是&#34;下一个.text-hidden&#34;,它将是这样的:

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

答案 1 :(得分:2)

使用For R = 1 To UBound(valarray, 1) ' First array dimension is rows. For C = 1 To UBound(valarray, 2) ' Second array dimension is columns. ReDim Preserve tvalarray(1 To C) 'Reset the array dimension on each iteration of loop whilst keeping results 'Input each single value into subarray for joining tvalarray(C) = valarray(R, C) 'Join the subarray jstring = Join(tvalarray) Next C ReDim Preserve jvalarray(1 To R) 'Reset the array dimension on each iteration of loop whilst keeping results 'Input the joined result into the new array jvalarray(R) = jstring 'Print to file Print #intFNumber, jvalarray(R) Next R 来获得您想要的内容

.next()

这将选择类$(this).next(".text-hidden").show()的下一个元素并显示它

以下示例。

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