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

您需要跟踪弹出窗口的状态，因为.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链接维护一个单独的状态。

Answer 2

$('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();
  } 
}() ) );

就问题而言，Alnitak的答案在功能上是完美的，但是您可以通过简单的原生闭包（无需使用$.fn.data）来实现相同的优势，其优点是：

通过避免jQuery的DOM关联数据绑定来节省代码执行，并且只声明state一次
避免在DOM中不必要地保存状态，其他代码可以篡改它

编辑：正如Alnitak在评论中指出的那样，立即调用的闭包只会为所有 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();
  } );
} );

编辑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。

无法使切换功能起作用

2 个答案: