Question

我的css文件中定义了样式

如果我的

中的文字，我想应用这种风格

<style type="text/css">
td.mytdclass {
  color: white;
  background-color: red;
}
</style>

说无日程安排

<style>
td.mytdclass {
  color: black;
}
</style>

否则我想使用这种风格

$('.ceoMondaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

$('.ceoTuesdaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

$('.ceoWednesdaySchedule').each(function(idx, obj) {
    var txt = $(this).text();
    console.log(txt);
    if (txt === "No Schedule Set" + "No Schedule Set") {
        $(this).css('color', 'red');
    } else {
        $(this).css('color', 'black');
    }
});

我在客户端使用jQuery。

我可以写

card

并且持续5天，然后为cfo然后cto

做同样的事情

但是有更好的方式来写这个吗？

Answer 1

<强>更新

在审核了OP的代码中非常熟悉的编辑后，我更新了同样熟悉的代码以回应后续问题：

＆＃34;我可以写，＆＃34;

奇怪熟悉的代码

＆＃34;并且继续这样做5天然后对cfo做同样的事情然后cto但是有更好的方式来写这个吗？＆＃34;

是的，只需更改选择器即可。该更新具有属性特殊值选择器和标签选择器，前者非常具体，后者更通用。

$('[class$="Schedule"]')表示：任何元素的className 结尾，字符串为：＆＃34; Schedule＆＃34;。



$('td span')表示：任何跨越td的孩子。

我还添加了两个按钮来演示两个选择器的范围。

<小时/> 使用

.each()转到每个目标（即.jobTitle）并执行功能
.text()查找目标中的实际内容（即No Schedule Set）
.css()更改目标的样式（即color red）

<强>段

＆＃13;

function targetSchedule() {
  $('[class$="Schedule"]').each(function(idx, obj) {
    var txt = $(this).text();
    if (txt === 'No Schedule Set') {
      $(this).css('color', 'red');
    } else {
      $(this).css('color', 'black');
    }
  });
}

function targetAllSpan() {
  $('td span').each(function(idx, obj) {
    var txt = $(this).text();
    if (txt === 'No Schedule Set') {
      $(this).css('text-decoration', 'underline');
    } else {
      $(this).css('font-size', 'smaller');
    }
  });
}

＆＃13;

table {
  border: 1px solid grey;
}

td {
  border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick='targetSchedule()'>Any className ending with "Schedule" and has the text "No Schedule Set" will have red text; anything else will have black text</button>
<button onclick='targetAllSpan()'>Any span that's a child of a td and has the text "No Schedule Set" will be underlined; anything else will have smaller text</button>
<table>
  <tr>
    <td class="lalign"><span class="ceoName">No Schedule Set</span><span class="ceoTitle" style="color: navy;text-align: center;">Schedule Set</span></td>
    <td><span class="ceoMondaySchedule">No Schedule Done</span></td>
    <td><span class="ceoTuesdaySchedule">Set Schedule No</span></td>
    <td><span class="ceoWednesdaySchedule">NoScheduleSet</span></td>
    <td><span class="ceoThursdaySchedule">No Schedule Set</span></td>
    <td><span class="ceoFridaySchedule">No Scedule Set</span></td>
  </tr>
  <tr>
    <td class="lalign"><span class="cfoName">No Schedule Set No</span><span class="cfoTitle" style="color: navy;text-align: center;">Schedule Set</span></td>
    <td><span class="cfoMondaySchedule">no schedule set</span></td>
    <td><span class="cfoTuesdaySchedule">No Schedule Set</span></td>
    <td><span class="cfoWednesdaySchedule">No</span></td>
    <td><span class="cfoThursdaySchedule">Schedule</span></td>
    <td><span class="cfoFridaySchedule">Set</span></td>
  </tr>
  <tr>
    <td class="lalign">Nope<span class="ctoName"></span><span class="ctoTitle" style="color: navy;text-align: center;">Set No Schedule</span></td>
    <td><span class="ctoMondaySchedule">没有设定时间表</span></td>
    <td><span class="ctoTuesdaySchedule">✦</span></td>
    <td><span class="ctoWednesdaySchedule">No Schedule Set</span></td>
    <td><span class="ctoThursdaySchedule">No Schedule Set</span></td>
    <td><span class="ctoFridaySchedule"></span></td>
  </tr>
</table>

＆＃13;

Answer 2

您可以使用JQuery：contains（）选择器执行此操作。这将选择＆＃34;包含＆＃34;的所有元素。指定的字符串。

$( "td span.jobTitle:contains('No Schedule Set')" ).css({
    backgroundColor: "red",
    color: "white"
})

如何将td的文本颜色更改为红色

2 个答案: