не может заставить функцию переключения работать

Question

Я новичок в jQuery и экспериментирую с некоторыми плагинами. Я нашел один под названием jQuery Balloon. Когда я добавляю свой скрипт и запускаю код, пузырь всплывает, но не исчезнет.

Вот мой код:

<script type="text/javascript" src="/js/jquery.js"></script> 
    <script type="text/javascript" src="/js/jquery.balloon.min.js"></script> 

Вот мой JQuery код. Я опустил document.ready, потому что у меня есть это в верхней части моего документа.

$("a").click(function(event){ 
    $(this).showBalloon().toggle(); 
    event.preventDefault(); 

Как получить воздушный шар всплывающее окно, когда пользователь нажимает на ссылку и он уходит, когда они щелкают от него?

Answer 1

$('a').on('click', (function balloonState(){ 
    var state = true; 

    return function(ev) { 
     var $this = $(this); 

     if (state) { 
      $this.showBalloon(); 
     } else { 
      $this.hideBalloon(); 
     } 

     state = !state; 

     ev.preventDefault(); 
    } 
}())); 

ответ Альнитак является функционально совершенным, насколько идет речь, но вы можете достичь того же с простыми носителями закрытий (без использования $.fn.data), преимущества которых являются:

• Сохранение на коде выполнение, избегая JQuery DOM-ассоциированный с привязкой данных и только декларирование state раз
• Избегайте понапрасну состояние сохранения в DOM, где другой код сможет влиять с ним

EDIT: Как Альнитак отметил в комментариях, немедленно вызывается закрытие может создать только одну переменную для stateвсе<a> с. Если предположить, что это не то, что требуется, мы можем использовать JQuery-х каждый, чтобы создать закрытия для каждого <a>:

$('a').each(function balloonState(){ 
    var state = true; 
    var $this = $(this); 

    $this.on('click', function(ev) { 
     if (state) { 
      $this.showBalloon(); 
     } else { 
      $this.hideBalloon(); 
     } 

     state = !state; 

     ev.preventDefault(); 
    }); 
}); 

EDIT 2: Описанный выше метод имеет оговоркой, что она будет создавать новую функцию для каждой ссылки на странице во время выполнения, что очень расточительно с точки зрения управления памятью и быстрой инициализации. The plugin homepage uses the old jQuery toggle method to get around the problem of when to execute hideBalloon and showBalloon, но this was deprecated in jQuery 1.9. В целом я бы рекомендовал использовать Alnitak's method.

Answer 2

Вам нужно будет отслеживать состояние всплывающего окна, так как функции .toggle(fn1, fn2) теперь deprecated:

$('a').on('click', function(ev) { 
    var $this = $(this); 
    var state = !$this.data('balloon'); // use .data, initially undefined 
    if (state) { 
     $this.hideBalloon(); 
    } else { 
     $this.showBalloon(); 
    } 
    $this.data('balloon', state); 
    ev.preventDefault(); 
}); 

Обратите внимание, что это будет поддерживать отдельное состояние для каждого a звена.