jquery代码会导致不必要的空间

Question

我遇到了有选项和答案功能的问题。如果我选择一个包含多个按钮输出的选项，例如，如果我选择选项20，它将显示20个按钮，我得到的问题是在表格列的底部，空间会略微下降。只有在更改选项然后整个空间保持不变时才会执行此操作。我的问题是如何在选项更改时停止表格列底部的空格增加？

我发现导致此问题的代码是：

  //THE ISSUE IS HERE

var _x = $(e.currentTarget);
var _y = _x.closest('td.extratd');
var _z = _y.prev();

$('textarea', _z).css('height', '').height(_z.innerHeight());

//ISSUE ABOVE

现在上面的代码是允许Question列中的textarea填充整个表格单元格，如果附加了textarea或者选项发生了变化。所以我需要上面的代码，但上面的代码也会在表格行的底部创建一个不必要的空间，所以我需要帮助来整理不需要的空间。

我在这里有一个jsfiddle，你可以用来看看发生了什么，它还包括上面的代码：http://jsfiddle.net/aND4g/61/

请按照以下步骤使用小提琴：

1. 当您打开小提琴时，在问题文本区域中的内容中键入顶部，然后单击Open Grid并选择按钮3或4。

   < / LI>

2. 完成第1步后，点击Add Question按钮将上述详细信息附加到下表中

3. 现在在附近的行中，点击Open Grid，然后从您最初选择的内容中选择其他选项。您将看到它在表格行的底部创建了一个不需要的空间

Answer 1

这是因为您使用的是innerHeight()，其中包含padding-top和padding-bottom。

  

获取匹配元素集中第一个元素的当前计算高度，包括填充但不是边框。

     

- innerHeight() API documentation

由于这些都等于1em，因此您的身高会超出您想要的2em。所以，我实施了一个快速而又笨拙的解决方案：

// Get the padding of the cell
var ignoreHeight = parseInt(_z.css("padding-top")) + parseInt(_z.css("padding-bottom"));
// Set the height without that padding
$('textarea', _z).css('height', '').height(_z.innerHeight() - ignoreHeight);

<强> jsFiddle

基本上，我只是将填充添加到变量中，然后从您设置的实际高度中减去该填充。可能有一种更好的方法可以用一些更好的方法“忽略”这个填充，但在我看来，这将适用于你的情况。