使用 jQuery 切换下一个元素

Question

我的 this 元素有问题（我知道 this 是如何工作的）。

我有很多这样的 html 结构。当我单击 a 按钮时，必须显示带有 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>

提前感谢您的帮助。

Answer 1

更改您的代码，以便您在单击的链接之后直接获得额外的选项 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);
    };

});

Answer 2

描述

您应该使用 jQuery.parent() 和 jQuery.next() 来完成此操作。
查看示例和此jSFiddle 演示。

示例

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>

jQuery

$(".button").click(function () {
    var div = $(this).parent().next();
    if(div.is(":visible")) {
        div.hide();
    } else {
        div.fadeIn(450);
    };
});

更多信息

• jSFiddle 演示
• jQuery.next()
• jQuery.parent()

Answer 3

请参阅我为您制作的示例： http://jsfiddle.net/manuel/PmNwh/

我使用jquery next() 函数获取第一个 .extra-options-tickets

Answer 4

this 元素表示在您的情况下调用操作的元素，它是 元素。

看起来您只想显示下一个

而不是全部，所以您需要这样思考：

在此代码中，如果触发 click 的是 （您的选择器），我该如何到达

; 我想要 展示？

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

从 中，您可以导航到上一个元素，即

和 < strong>next 元素（

）是我想要的...

将其转换为代码：

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

您始终可以制作更通用的元素，这样您就可以安全地在两者之间添加更多元素，例如：

而不是调用.prev() （前一个元素），找到最接近的具有 actions 类的元素，然后从那里找到 DOM 中具有 类的下一个元素extra-options-tickets，翻译：

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