javascript - 使用 jQuery 更改对象宽度和窗口大小

Question

我有一些跨度对象，我使用具有特定宽度属性的 jQuery 将其插入到表中。我希望这些对象的宽度随着窗口大小的变化而变化，因为表格具有相对位置。

这是我的代码(该片段没有很好地显示问题 - 更改窗口大小，但它给出了上下文的想法):

$(document).ready(function() {
  var var1 = 2
  var element = $('td').filter(function() {
    var holidayText = $(this).contents()[0].textContent.trim();
    return parseInt(holidayText, 10) == var1;
  });
  //need this to adjust with table size
  var cell_width = element.width();

  var2 = 3;
  var width = var2 * cell_width;

  add_html = element.append('</br><span class="spanclass" style="width: ' + width + 'px; position: absolute"></span>');
});

div.class1 {
  position: relative;
}

table {
  border: 1px solid navy;
  width: 70%;
  text-align: center;
}

table th {
  text-align: center;
  width: 100px;
  height: 20px;
}

table td {
  width: 100px;
  height: 100px;
  vertical-align: top;
  text-align: right;
  border: 1px solid #c6c6ec;
  position: relative;
}

span.spanclass {
  background-color: purple;
  height: 14px;
  display: inline-block;
  padding: 2px;
  left: 0;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="class1">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
    </tbody>
  </table>
</div>

如何获取宽度属性/分配一个新属性，这意味着该宽度随表格/窗口大小缩放？我为此使用 em 吗？还是宽度百分比？

谢谢

Answer 1

你必须使用 $(window).resize()。

我已经更改了您的脚本并且它对我有用: https://fiddle.jshell.net/71rd84jy/

告诉我。干杯。