我在 css 文件中定义了样式
如果我的文本中的文本我想应用此样式
<tr>
<td class="lalign"><span class="ceoName"></span><span class="ceoTitle" style="color: navy;text-align: center;"></span></td>
<td><span class="ceoMondaySchedule"></span></td>
<td><span class="ceoTuesdaySchedule"></span></td>
<td><span class="ceoWednesdaySchedule"></span></td>
<td><span class="ceoThursdaySchedule"></span></td>
<td><span class="ceoFridaySchedule"></span></td>
</tr>
<tr>
<td class="lalign"><span class="cfoName"></span><span class="cfoTitle" style="color: navy;text-align: center;"></span></td>
<td><span class="cfoMondaySchedule"></span></td>
<td><span class="cfoTuesdaySchedule"></span></td>
<td><span class="cfoWednesdaySchedule"></span></td>
<td><span class="cfoThursdaySchedule"></span></td>
<td><span class="cfoFridaySchedule"></span></td>
</tr>
<tr>
<td class="lalign"><span class="ctoName"></span><span class="ctoTitle" style="color: navy;text-align: center;"></span></td>
<td><span class="ctoMondaySchedule"></span></td>
<td><span class="ctoTuesdaySchedule"></span></td>
<td><span class="ctoWednesdaySchedule"></span></td>
<td><span class="ctoThursdaySchedule"></span></td>
<td><span class="ctoFridaySchedule"></span></td>
</tr>
说未设置时间表
<style type="text/css">
td.mytdclass {
color: white;
background-color: red;
}
</style>
否则我想使用这种风格
<style>
td.mytdclass {
color: black;
}
</style>
我在客户端使用 jQuery。
我可以写
$('.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');
}
});
连续 5 天这样做,然后对首席财务官和首席技术官进行同样的操作
但是有更好的写法吗?
最佳答案
更新
在审查了 OP 奇怪熟悉的代码编辑后,我更新了我同样熟悉的代码以回答后续问题:
"I could write,"
异常熟悉的代码
"and keep doing it for all 5 days then do the same for cfo then cto but is there a better way of writing this?"
是的,只需更改选择器即可。此次更新包含属性特殊值选择器和标签选择器,前者非常具体,后者更加通用。
$('[class$="Schedule"]')
Means: Any element that has a className ending with the string: "Schedule".
$('td span')
Means: Any span that's a child of a td.
我还添加了两个按钮来演示两个选择器的范围。
使用
.each()
转到每个目标(即.jobTitle
)并执行功能.text()
查找目标中实际包含的文本(即无计划集
).css()
更改目标的样式(即color
red
)
片段
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');
}
});
}
table {
border: 1px solid grey;
}
td {
border: 1px solid black;
}
<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>
关于javascript - 如何将 td 的文本颜色更改为红色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42262885/