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

描述

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

示例

<强> 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 Demonstration

jQuery.next()

jQuery.parent()

Answer 2

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

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

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

Answer 4

this元素表示在您的情况下调用动作女巫的元素，它是<a>元素。

它想要只展示下一个<div class="extra-options-tickets">而不是全部，所以你需要这样想：

在此代码中，如果触发click的是<a>（您的选择器），我该如何到达我要显示的<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>

从<a>您可以导航到上一个元素，其中包括<p class="actions">和下一个元素（<div> ）是我想要的那个......

将其翻译为代码：

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类的elemnt，然后从那里找到DOM中的下一个元素extra-options-tickets ，翻译：

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

使用jQuery切换下一个元素

4 个答案:

描述

示例

更多信息