jquery为多个div切换类

Question

我有3个段落，我需要为每个段落切换类。这3段包含相同的类名，如下所示。

<p class="news-btn">Click here</p>
<p class="content">Content 1</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 2</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 3</p>

问题

由于类名相同，它将切换所有三项。我想出了一个想法，将唯一的类添加到"content"div中，但我必须重复我的jquery代码，以便只在每个项目中切换类。

有什么帮助吗？我需要逐一显示内容。这是小提琴

Answer 1

基于HTML代码，jQuery确实会针对所有.content元素。因此，您想要的是以类.content的第一个元素为目标。

您可以使用next()函数来执行此操作
请注意，.content需要是.news-btn的直接同级，才能实现此功能。

$(".news-btn").click(function() {
$(this).next(".content").toggleClass("show-content");
/* $(this) refers to the element which triggered the event, in this case the .news-btn which is clicked
.next() will target the next element in line. Note that .content needs to be directly after .news-btn
toggleClass() speaks for itself */
});

.content {
display: none;
}
.show-content {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news-btn">Click here</p>
<p class="content">Content 1</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 2</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 3</p>

奖金：

如果只想显示其中一个.content项目，则可以使用此代码。它做的基本上是一样的，期望它首先隐藏所有.content元素，然后将类添加到第一个.content同级。

$(".news-btn").click(function() {
$(".content").removeClass("show-content"); 
/* hide all .content elements */
$(this).next().addClass("show-content");
/* $(this) refers to the element which triggered the event, in this case the .news-btn which is clicked
.next() will target the next element in line. Note that .content needs to be directly after .news-btn
addClass() will add the class to the element */
});

.content {
display: none;
}
.show-content {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="news-btn">Click here</p>
<p class="content">Content 1</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 2</p>
<hr>
<p class="news-btn">Click here</p>
<p class="content">Content 3</p>