Question

不确定这是因为我是meteor的新手还是我的HTML或jQuery语法错误。理想情况下，我希望在单击按钮时整个网格保持原位。例如，如果您单击网格中间的按钮，那么该按钮之前会有一个空白点。我的问题是，为什么当我点击按钮时按钮消失但移动整个网格，我该怎么做才能解决这个问题？

HTML：

<head>
  <title>bubblepopper</title>
</head>

<body>
  <center>{{> grid}}</center>

</body>
<template name ="grid">
  <div id="container">
    {{#each buttons}}
      <button class="button" type="button"></button>
    {{/each}}
  </div>

</template>

JS：

Buttons = new Meteor.Collection("buttons");
if (Meteor.isClient) {
  player = prompt("What is your name?")

  Template.grid.buttons = function () {
   }
   Template.grid.buttons = function () {
     var list = [];
     for(var i=1; i<=64; i++){
       list.push({value: i});
    }
   return list;
};

Template.grid.events({
  'click .button': function(ev) {
    $(ev.target).hide()
  }
});

}

if (Meteor.isServer) {

}

Answer 1

.hide()的工作原理是将样式display: none添加到元素中。这将删除呈现页面中元素使用的空间。

如果您想让某些内容隐身但在页面上保留其空间，请使用visibility样式：

$(ev.target).css('visibility', 'hidden');

要恢复它，请将可见性设置为visible。

使用.hide（）时保持按钮就位

1 个答案: