Переключить следующий элемент с помощью jQuery - PullRequest
Новая
       1

Переключить следующий элемент с помощью jQuery

3 голосов
/ 04 января 2012

У меня проблема с элементом this (я знаю, как работает this).

У меня много этой HTML-структуры.Когда я нажимаю на кнопку a, должен показываться div с классом extra-options.Но так как у меня много повторяется одна и та же структура 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>

Спасибо за вашу помощь заранее.

Ответы [ 4 ]

3 голосов
/ 04 января 2012

Описание

Вы должны использовать 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);
    };
});

Дополнительная информация

2 голосов
/ 04 января 2012

Измените свой код так, чтобы вы получали дополнительные опции 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);
    };

});
0 голосов
/ 04 января 2012

Элемент 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 и оттуда найдите следующий элемент в DOM с классом extra-options-tickets, переводя: 

var extraOptions = $(this).closest(".actions").next(".extra-options-tickets");
0 голосов
/ 04 января 2012

посмотрите пример, который я сделал для вас: http://jsfiddle.net/manuel/PmNwh/

Я использую функцию jquery next(), чтобы получить первый .extra-options-tickets

...