使用jQuery切換下一個元素

Question

我對this元素有問題（我知道this是如何工作的）。

我有很多html結構。 當我單擊一個按鈕時，必須顯示帶有類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演示 。

樣品

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 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元素表示在您的情況下調用action action的元素，它是<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類的.prev() ，然后從那里找到帶有一類extra-options-tickets的DOM中的下一個元素，翻譯：

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