使用jQuery切换下一个元素

Toggle next element with jQuery

本文关键字：下一个 元素 jQuery 使用      更新时间：2023-09-26

我对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>

感谢您提前提供的帮助。

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

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

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

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">，下一个

将其转换为代码：

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的最近元素，然后从那里找到类为extra-options-tickets的DOM下一个元素，转换为：

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

相关文章：