Несколько переключателей JQuery на одной форме - PullRequest
Новая
       14

Несколько переключателей JQuery на одной форме

2 голосов
/ 27 февраля 2011

У меня есть форма, к которой некоторые поля имеют прикрепленные поля расширения. Это выглядит примерно так (несколько раз с небольшими вариациями): 

<a class="label toggle" rel="toggle[time_allowed]">
  <label for="file_time_allowed" id="time_allowed_label">
    Time Allowed (mins)
  </label>
</a>
<%= form.text_field :time_allowed, :id => "time_allowed" %>
<div class="clear"></div>
<div class="expand_me" id="time_allowed_toggle" style="display:none;"><br />
  <div class="linkExpand expandDiv">
Set a time limit.<br /><br />
  </div>    
</div>

У меня есть этот JQuery для расширения .expand_me div, когда пользователь нажимает на любой .toggle. 

<script type="text/javascript">
$(function() {
  $(".toggle").click(function() {
    $(this).nextAll(".expand_me").first().toggle("blind",{},500);
    return false;
  });
});
</script>

Два вопроса:

  1. Если я дважды или трижды щелкну по .toggle, то под ним переключится 2-3 .expand_me деления. По-видимому, моя текущая функция не всегда вызывает следующий .expand_me, а скорее следующий, который в настоящее время не анимируется. Как я могу убедиться, что функция переключения всегда и только нацелена на следующий div независимо от его состояния анимации?

  2. Я хотел разорвать очередь анимаций, которые изначально создаются в JQuery, добавив .stop() к моей строке переключения, как в: 

    $(this).nextAll(".expand_me").first().stop().toggle("blind",{},500);

    Так как у меня проблема с # 1, я не смог проверить, работает ли это. Если этого не произойдет, как я могу гарантировать, что новичок, который дважды щелкает мышкой по элементу div, не встретит запутанную двойную анимацию?

1 Ответ

0 голосов
/ 27 февраля 2011

Работает нормально, если вы используете просто .next() вместо .nextAll().first():

http://jsfiddle.net/ambiguous/xdH82/3/

Или если вы используете стандарт .toggle() вместорасширенный от jQuery-UI:

http://jsfiddle.net/ambiguous/xdH82/4/

Я не знаю, почему есть разница, но обзор внутренних компонентов jQuery, вероятно, показателен.Если вы поиграете с одиночным и двойным щелчком здесь:

http://jsfiddle.net/ambiguous/Nudkh/

Тогда вы увидите, что список .nextAll() исключает текущий анимационный элемент, ноЯ не знаю почему.

В любом случае, .next('.expand_me') точно соответствует вашим намерениям, так что я просто согласился бы и пошел дальше.OTOH, эта разница между .next() и .nextAll().first(), вероятно, будет беспокоить меня в течение многих дней, надеюсь, кто-то предложит объяснение, чтобы успокоить мой разум.

ОБНОВЛЕНИЕ: Если вы смотритеАнимация с инспектором DOM (например, «проверяющий элемент» в WebKit) показывает, что расширенный .toggle в jQuery-UI оборачивает анимированный элемент в дополнительный <div> во время анимации.Поэтому, если вы скажете .nextAll('.expand_me'), он не найдет нужного вам .expand_me, поскольку он больше не будет братом или сестрой: он будет ребенком временного брата..next('.clear').next('.expand_me') удобно не сможет ничего найти, так как временная оболочка заблокирует прямой путь «this -> .clear -> .expand_me», и обработчик щелчка не будет ничего делать при втором щелчке двойного щелчка.

Мне, вероятно, следовало пойти прямо в исходный код jQuery-UI, чтобы выяснить странное поведение .nextAll().Ну хорошо, по крайней мере, я знаю, что происходит сейчас.

ОБНОВЛЕНИЕ 2: Лучшим подходом, чем все это .next дело, было бы явное связывание ссылки с панелью переключения: 

<a data-panel="panel-1">
    <!--...-->
</a>
<!--...-->
<div id="panel-1" class="expand_me">
    <!--...-->
</div>

И: 

$('.toggle').click(function() {
    $('#' + $(this).data('panel')).stop().toggle('blind', { }, 500);
});

Если у вас более старый jQuery, вам, возможно, придется использовать .attr('data-panel') вместо .data('panel').

Пример: http://jsfiddle.net/ambiguous/pmQR7/1/

...