不确定这是因为我是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) {
}
最佳答案
.hide() 的工作原理是向元素添加 display: none 样式。这会删除渲染页面中元素使用的空间。
如果您想让某些内容不可见，但保留其在页面上的空间，请使用 visibility 样式:
$(ev.target).css('visibility', 'hidden');
要恢复它，请将可见性设置为可见。
关于javascript - 使用 .hide() 时将按钮保持在适当的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20851229/