使用jQuery切换下一个元素 [英] Toggle next element with jQuery

问题描述

我的这个元素有问题（我知道这个是如何运​​作的。）

I have a problem with the this element (I know how this is working).

我有很多html结构。当我点击a按钮时，必须显示类 extra-options 的div。但是由于我有很多相同的html结构，当我点击按钮时，所有其他div选项也会显示。

I have a lot of that html structure. When I click on the a button, the div with class extra-options must be shown. But since I have a lot of the same html structure repeated throughout, when I click on the button, all the other div options are also shown.

我该如何解决它？

这是JavaScript：

Here’s the 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，如下所示：

Change your code so that you get the extra options div directly after the clicked link like this:

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切换下一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！