Question

有一行代码无法正常工作。我使用这些代码按窗口宽度更改类名。谢谢！

{{1}}

Answer 1

在函数内部，尚未创建var。所以要使其工作：将var td放入函数中2次。

<script>
  function waddonsclass() {
    var td = document.getElementsByTagName("td");
    td[0].className = "waddons-wsite-multicol-col";
    td[3].className = "waddons-wsite-multicol-col";
    td[6].className = "waddons-wsite-multicol-col";
    td[9].className = "waddons-wsite-multicol-col";
  }

  function normalclass() {
   var td = document.getElementsByTagName("td");
    td[0].className = "wsite-multicol-col";
    td[3].className = "wsite-multicol-col";
    td[6].className = "wsite-multicol-col";
    td[9].className = "wsite-multicol-col";
  }

  if ($(window).width() < 512) normalclass(); /*This line couldn’t work.*/

  $(window).resize(function() {
    if ($(window).width() < 512) normalclass();
    else waddonsclass();
  });
</script>

丑陋的js。但这是我猜的答案。干杯！

Answer 2

以下是使用jQuery的功能代码段。我已经清理了一下你的代码了。由于您只需要一个函数，因此不需要两个函数，您可以将单个函数传递给$(window).resize(resized)处理器。

＆＃13;

function resized() {
  var css_class = $(this).width() < 512 ? 'wsite-multicol-col' : 'waddons-wsite-multicol-col';
  $('td:nth-child(3n+1)').addClass(css_class);
}

$(window).resize(resized);
resized();

＆＃13;

.wsite-multicol-col {
  background: blue;
}

.waddons-wsite-multicol-col {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

＆＃13;

或者，您可以使用CSS。但是，我不知道基于:nth-child添加特定类的方法。

@media screen and ( max-width: 512px ) {
  td:nth-child(3n+1) {
    /* styles for < 512 screen width */
  }
}
@media screen and ( min-width: 512px ) {
  td:nth-child(3n+1) {
    /* styles for > 512 screen width */
  }
}

按标签名称更改班级名称

2 个答案: