3

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

我有一个嵌套的 div ：

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

我希望孩子只在父母悬停时显示。

render()所以我可以使用这段代码（父Backbone.View.extend中的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来直接绑定交互，而不是使用多个全局document.ready()s，但也许我不知道使用这种方法完成它的“安全/良好”方式
4

3 回答 3

2

这可以通过直接的 CSS 来完成。不需要Javascript（骨干网或其他）。

将以下 CSS 添加到您的页面将获得您所需要的，而无需使用 javascript：

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

在这里展示了一个小提琴：http: //jsfiddle.net/35TXY/

于 2013-07-13T21:11:34.543 回答
2

正如 chcrist 所指出的，这样做的“主干”方式是使用事件 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');
于 2013-07-13T20:30:08.450 回答
1

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

.hidden {visibility: hidden;}
于 2013-07-13T15:44:55.930 回答