在BackBone视图中放置JQuery(set:visibility via CSS）的位置

Where to place JQuery (set :visibility via CSS) in a BackBone View

本文关键字：via visibility CSS 位置 set 视图 BackBone JQuery      更新时间：2023-09-26

我认为这个问题最终归结为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的可见性，或者我应该如何改变呈现来适应它所在的代码呢？

注：

  • 有许多这样的"父"answers"子"div
  • 我认为最好使用带有this.el的选择器来直接绑定交互，而不是使用几个全局document.ready()，但也许我不知道使用这种方法来实现它的"安全/良好"方法

正如chcrist所指出的，实现这一点的"骨干"方法是使用事件哈希：

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');

这可以用直接的CSS来完成。不需要Javascript（主干或其他）。

在您的页面中添加以下CSS将在不使用javascript:的情况下获得您所需要的内容

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

这里有一把小提琴在演奏：http://jsfiddle.net/35TXY/

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

.hidden {visibility: hidden;}
相关文章：