javascript - Toggle next element with jQuery - Stack Overflow

admin管理员组

文章数量:1389834

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

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.

How can I fix it?

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);
        };

    });

And here’s the 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>

Thanks for your help in advance.

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

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.

How can I fix it?

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);
        };

    });

And here’s the 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>

Thanks for your help in advance.

• javascript
• jquery
• this

Share Improve this question Follow edited Jan 4, 2012 at 10:50 Abbas 6,87444 gold badges3737 silver badges4949 bronze badges asked Jan 4, 2012 at 10:28 Mike VierwindMike Vierwind 1,52044 gold badges2424 silver badges4444 bronze badges 1

• Do some DOM traversing to find the right element: api.jquery./category/traversing. You said you have a problem with this but I don't even see you using it. – Felix Kling Commented Jan 4, 2012 at 10:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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);
    };

});

Description

You should use jQuery.parent() and jQuery.next() to get this done. Check out the sample and this jSFiddle Demonstration.

Sample

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);
    };
});

More Information

• jSFiddle Demonstration
• jQuery.next()
• jQuery.parent()

see this example I made for you: http://jsfiddle/manuel/PmNwh/

I use the jquery next() function to get the first .extra-options-tickets

The this element represents the element that invoked the action witch in your case, it's the <a> element.

and it seams you want to only show, the next <div class="extra-options-tickets"> and not all of them, so you need to think like this:

In this code, if what fires the click is the <a> (your selector), how do I go to reach the <div> I want to show?

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

From <a> you can navigate to the previous element, witch is the <p class="actions"> and the next element (the <div>) is the one I want...

translating this to code:

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

you can always make more generic so you can safely add more elements in between, for example:

instead of calling the .prev() (previous element), find the closest elemnt with a class of actions and from there, find the next element down the DOM with a class of extra-options-tickets, translating:

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

本文标签： javascriptToggle next element with jQueryStack Overflow