Question

我使用WordPress创建我的网页，我使用了一个名为Weekly Class Schedule的插件。它创造了一个时间表，从技术上讲它是作为一张桌子制作的。这个插件的局限在于，当有和输入时，它只能有一个表格单元格。

现在，使用JavaScript，当我知道td元素的内容是一个常量文本时，如何更改背景的颜色？

一个TD元素的类名称的示例是wcs3-cell wcs3-hour-row-10-00 wcs3-day-col-1 wcs3-abs-col-0，但显然它是动态创建的，所以我不能真正依赖于确切的名称。

我认为wcs3-cell将是基本的班级名称，但在代码之下并不起作用：

function f_color() {
    if (document.getElementByClassName('wcs3-cell').value = 'boks') {
        document.getElementByClassName('wcs3-cell').style.background-color = "yellow";
    }
}

f_color();

你能告诉我如何解决这个问题吗？另外，我应该使用yellow !important作为新的CSS值来确保使用新代码吗？

Answer 1

在if条件声明中使用==代替=

如果声明是backgroundColor而不是background-color，那么你所做的其他错误就在里面。请更正并检查

 if (document.getElementByClassName('wcs3-cell').value == 'boks') {

  document.getElementByClassName('wcs3-cell').style.backgroundColor = "yellow";

 }

Answer 2

使用平等运营商 ==或===来比较if声明
使用backgroundColor代替background-color

请参阅下面突出显示的代码：

＆＃13;

function f_color() {
  var allElements = document.getElementByClassName('wcs3-cell'),
    totalElements = allElements.length;

  for (var i = 0; i < totalElements; i++) {
    document.getElementByClassName('wcs3-cell').style.backgroundColor = allElements[i].value == 'boks' ? 'yellow' : '';
  }
}

f_color();

＆＃13;

Answer 3

您的代码中有几个问题：

在比较值时应使用==。
getElementByClassName应为getElementsByClassName - 注意＆＃39;元素 s ＆＃39;
td个元素没有value属性 - 您需要阅读textContent。
getElementsByClassName返回多个元素，因此您需要遍历每个元素并单独检查它们的值。
当使用CSS样式名称作为style对象的属性时，应使用JS表示法，在本例中为backgroundColor。

尽管如此，试试这个：

function f_color() {
    var elements = document.getElementsByClassName('wcs3-cell');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].textContent == 'boks') {
            elements[i].style.backgroundColor = "yellow";
        } 
    }
}

Example fiddle

正如您使用jQuery标记了问题一样，这里有一个实现：

function f_color() {
    var $elements = $('.wcs3-cell').filter(function() {
        return $(this).text() == 'boks';
    }).css('backgroundColor', 'yellow');
}

Answer 4

我使用了一个名为Weekly Class Schedule的插件。

所以你的页面中似乎有一个动态生成的tds，所以现在你必须在你的表完全生成trs / tds时使用这个函数。

你需要使用它：

function f_color() {
   var els = document.getElementsByClassName('wcs3-cell'); // get all the tds
   for(var i = 0; i <= els.length-1; i++) { // loop over the length of it
      if (els[i].textContent.trim() === 'boks') { // check the tds text while trimming it.
          els[i].style.backgroundColor = "yellow"; // here change the background color.
       } 
   }
}

现在当你的表行附加在DOM中时调用此函数，因为如果你在行生成之前使用它，它将无法工作。

Answer 5

＆＃13;

function f_color(){

  $('td').each(function(){
  
  
  var text = $(this).text();
    
    if(text == 'Book')
      {
        $(this).css('background','red')
      }
  
  })


}

f_color()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Book</td>

  
</tr>
  <tr><td>Note </td></tr>

</table>

＆＃13;

Answer 6

像其他一些人指出的那样，你使用的是=而不是==或===。 ==和===是比较运算符，所以你用它们比较两个值，而=本身只是说某些东西是别的。

例如

var x = y

意味着现在变量x现在无论是什么。

而

var x === y

询问x是否与y相同（值和类型）。

var x == y

类似，但只是要求价值而不论类型

当我第一次开始时，我在代码中加载了这个错误，现在就好好清楚一点。

有关此内容的更多详细信息：

http://www.w3schools.com/js/js_comparisons.asp

根据元素的内容更改元素的颜色

6 个答案: