通过标记名更改类名

Question

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

<script>
  var td = document.getElementsByTagName("td");

  function waddonsclass() {
    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() {
    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>

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)。

​

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();

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

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

<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>

​

或者，您可以使用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 */
  }
}