Question

我该如何对多个类使用此代码？

$("td.field_358").each(function() {
    var td = document.getElementsByClassName('field_358');
    for (i = 0; i < td.length; i++) {
        if (td[i].innerHTML.indexOf('Yes') !== -1) {
            td[i].style.backgroundColor = '#f7fef7';
        } else if (td[i].innerHTML.indexOf('No') !== -1) {
            td[i].style.backgroundColor = '#fbe8ea';
        }
    }  
})

实际上，我在重复不同类的代码，只是替换了类... field_358，field_123 ...等。可以做一些更方便的事情：

$("td.field_358", "td.field_359", "td.field_360").each(function() {
  var td = document.getElementsByClassName('field_358', 'field_359', 'field_360');
});

我是JS Noob ...

Answer 1

您可以将您感兴趣的所有css类放入数组中，然后对其进行迭代。对于每次迭代，您将执行已经获得的代码：

['field_358', 'field_359', 'field_360'].forEach(function (cssClass) {

  var td = document.getElementsByClassName(cssClass);

  for (i = 0; i < td.length; i++) {
    if (td[i].innerHTML.indexOf('Yes') !== -1) {
       td[i].style.backgroundColor = '#f7fef7';
    } else if (td[i].innerHTML.indexOf('No') !== -1) {
      td[i].style.backgroundColor = '#fbe8ea';
    }
  }
});

可以在https://jsfiddle.net/9sba06r4/3

找到一个工作示例

侧面说明：您不需要jQuery即可完成此任务，只需使用更新的浏览器即可。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 2

这是一个可重用的函数，它允许您传递代表希望定位的id的数字数组，还允许您传递代表希望用于突出显示颜色的字符串。

您只需定义函数的参数并调用它即可。

const ids = [1, 2, 3, 4];
const yesColor = '#37fef7';
const noColor = '#fbe8ea';

highlightTds(ids, yesColor, noColor);

function highlightTds(ids, yesColor, noColor) {
 
  ids.map(id => {
    const tds = document.querySelectorAll(`.field_${id}`);
  
    for (const key of Object.keys(tds)) {
      if (tds[key].innerHTML.indexOf('Yes')) {
        tds[key].style.backgroundColor = yesColor;
      } else if (tds[key].innerHTML.indexOf('No')) {
        tds[key].style.backgroundColor = noColor;
      }
    }
  });
}

<table>
  <tr>
    <td class="field_1">Yes</td>
  </tr>
  <tr>
    <td class="field_2">No</td>
  </tr>
  <tr>
    <td class="field_3">Yes</td>
  </tr>
  <tr>
    <td class="field_4">No</td>
  </tr>
  <tr>
    <td class="field_2">Yes</td>
  </tr>
  <tr>
    <td class="field_1">No</td>
  </tr>
</table>

用JS替换样式以实现多个分类

2 个答案: