javascript - 放置 JQuery 的位置(设置 :visibility via CSS) in a BackBone View

Question

我认为这个问题最终归结为我应该把 JQuery 代码放在哪里，我不确定 backbone.js。

我有一个嵌套的 div :

<div>Parent
  <div class='pull-right remove-measure-btn'>Child</div>
</div>

而且我希望子项仅在父项悬停时显示。

所以我可以使用此代码(父 Backbone.View.extend 的 render() 中 func() 中的顶行:

render: function():
....
 $(this.el).hover(
      function() {
          $('.remove-measure-btn').show();
          // $('.remove-measure-btn').css('visibility' : 'visible');
      },
      function() {
          $('.remove-measure-btn').hide();
          // $('.remove-measure-btn').css('visibility' : 'hidden');
      }
  );
....
return this;
}, 

但这只会切换显示，因为我正在使用 Bootstrap 并利用 .pull-right，所以我需要切换 CSS 的 :visibility，而不是display: 在不可见时保持子 div 的高度不变。因此，如果我使用上面代码块中的第二行，我会得到一个未定义的错误，因为编译的模板已经返回(我认为......)。

那么我应该在哪里放置 JQuery 来更改 CSS 可见性，或者我如何更改呈现以适应它所在的代码？

注意事项:

• 有很多这样的“父”和“子”div。
• 我假设最好将选择器与 this.el 一起使用以直接绑定(bind)交互，而不是使用多个全局 document.ready()，但是也许我不知道使用此方法完成它的“安全/好”方法

Answer 1

正如 chcrist 所指出的，执行此操作的“ Backbone ”方法是使用 events hash :

var MyView = Backbone.View.extend({

    events: {
      'mouseenter': 'showChild',
      'mouseleave': 'hideChild'
    },

    render: function () {
      //...
    },

    showChild: function () {
      $('.remove-measure-btn').css({'visibility' : 'visible'});
    },

    hideChild: function () {
      $('.remove-measure-btn').css({'visibility' : 'hidden'});
    }

});

此外，我假设这是一个错字，但这段代码是错误的:

$('.remove-measure-btn').css('visibility' : 'hidden');

您可以传递一个对象(一个或多个样式属性):

$('.remove-measure-btn').css({'visibility' : 'hidden'});

或者传递一个属性/值对:

$('.remove-measure-btn').css('visibility', 'hidden');