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:以保持高度当孩子不可见时，孩子会到位。因此，如果我使用上面代码块中的第二行，我会得到一个未定义的错误，因为已经返回了已编译的模板（我认为....）。

那么我在哪里放置JQuery来更改CSS visibilty，或者如何更改渲染以容纳代码呢？

注意：

这些“父母”和“孩子”中有很多这样的人。
我假设最好使用带this.el的选择器直接绑定交互，而不是使用多个全局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');

Answer 2

这可以通过直接CSS完成。

将以下CSS添加到您的页面可以在不使用javascript的情况下获得您所需的内容：

.remove-measure-btn {
    visibility:hidden;
}
div:hover > .remove-measure-btn {
    visibility:visible;
}

显示此操作的小提琴在这里：http://jsfiddle.net/35TXY/

Answer 3

尝试$('remove-measure-button').addClass('hidden')和removeClass('hidden')。定义隐藏：

.hidden {visibility: hidden;}

在BackBone视图中放置JQuery（设置：通过CSS的可见性）的位置

3 个答案: