Javascript 使用jQuery切换下一个元素

我对

这个

元素有问题（我知道

这个

是如何工作的）

我有很多这样的html结构。当我点击a按钮时，必须显示带有class

extra options

的div。但由于我在整个过程中重复了很多相同的html结构，当我单击按钮时，所有其他div选项也会显示出来

我怎样才能修好它

下面是JavaScript：

var buttonSubmit = $(".extra-options .details a.button");
    buttonSubmit.click(function (e) {
        e.preventDefault();
        var extraOptions = $(".extra-options-tickets");

        if($(".extra-options-tickets").is(":visible")) {
            extraOptions.hide();
        } else {
            extraOptions.fadeIn(450);
        };

    });

下面是html：

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">text</div>

文本

---

提前感谢您的帮助。

更改代码，以便在单击链接后直接获得额外的选项div，如下所示：

buttonSubmit.click(function (e) {
    e.preventDefault();
    // Get the extra options directly after the clicked link
    var extraOptions = $(this).closest('p.actions').next('div.extra-options-tickets');

    if(extraOptions.is(":visible")) {
        extraOptions.hide();
    } else {
        extraOptions.fadeIn(450);
    };

});

---

请看我为您制作的示例：

我使用jquery

next（）

函数获取第一个

。额外选项票证

说明 您应该使用

jQuery.parent（）

和

jQuery.next（）

来完成此操作。 看看样品和这个

样品 Html

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">
text
</div>

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">
text
</div>

更多信息

---

该

元素表示在您的情况下调用动作开关的元素，它是
元素

你只想显示下一个
，而不是全部，所以你需要像这样思考：

在此代码中，如果触发
单击的是
（您的选择器），那么如何到达要显示的

<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">text</div>

执行一些DOM遍历以查找正确的元素：。你说你对
这个
有问题，但我甚至没有看到你在使用它。
<p class="actions">
    <a href="#" class="button" title="Toevoegen"><span>Toevoegen</span></a>
</p>
<div class="extra-options-tickets" style="display: none; ">text</div>

var extraOptions = $(this) // my <a> element
                     .prev() // previous element (<p class="actions">)
                     .next(); // next element from <p> is <div class="extra-options-tickets">

var extraOptions = $(this).closest(".actions").next(".extra-options-tickets");