Question

我的HTML代码如下：

<img src="img.png" class="arrow"><h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>

如果我点击第一个img元素，我想切换＆＃34;介绍＆＃34; class，但只有第一个元素。如果我单击secont img，切换第二个＆＃34; intro＆＃34;等等。我如何在jQuery中执行此操作？（＆＃34;介绍＆＃34;显示：无;在CSS中）。我尝试了选择伪类：

$(".intro:first-child").click(function() {
    $("intro:first-child").toggle();
}

但它不起作用。也许我应该使用id（id =＆＃34; intro-1＆＃34;，＆＃34; intro-2＆＃34;等）代替类并在jQuery中分别选择每个元素？

Answer 1

使用 nextAll() 方法和 :first 伪类选择器。将click事件处理程序附加到img标记，内部处理程序this引用单击的元素dom对象。

// attach click event handler to all img tag
$(".arrow").click(function() {
    // get first `.intro` after the clicked img tag
    $(this).nextAll('.intro:first').toggle();
})

＆＃13;

$(".arrow").click(function() {
  $(this).nextAll('.intro:first').toggle();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img.png" class="arrow">
<h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>

＆＃13;

Answer 2

你可以通过在图像上切换类来实现。它还可以为您设置活动图像的样式。工作示例如下所示。

.intro {
    display: none;
}

img.arrow {
    border: 1px solid transparent;
}

img.image-active {
    border-color: #0f0;
}

.image-active + h2 + .intro {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="img.png" class="arrow"><h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>

layout.html.twig

Answer 3

合并.nextAll()和.eq()。请查看以下示例

＆＃13;

$(function() {
  $("img.arrow").click(function() {
    $(this).nextAll('.intro').eq(0).toggle();
  });
});

＆＃13;

.intro {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img.png" class="arrow">
<h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>

＆＃13;

Answer 4

$(".arrow").click(function() {
    $(this).next('.intro').toggle();
});

如何使用同一个类来切换单个元素

4 个答案: