ユーザーがクリックして出席または不在を切り替えることができる「出席」または「不在」を表示するページにいくつかの単語があります。
単語が「不在」に設定されている場合、そのテキストを赤くしたい。
単語は bool を表し、次のコードを使用して画面上で更新されます。
<script type="text/javascript">
absentText = $.trim('@MyApp.Resources.MyAppResource.Absent_Text').toLowerCase();
presentText = $.trim('@MyApp.Resources.MyAppResource.Present_Text').toLowerCase();
updateAttendanceUrl = '@Url.Action("UpdateAttendance", "Attendance")';
</script>
MyAppResource.Absent_Text = Absent の場合、ページには「absent」という単語が表示されます。
MyAppResource.Absent_Text を「absent」に変更すると、ページが文字通り表示されます<span style="color:red">absent</span>
これが私のビューソースのサンプルです:
<td><span style="color:red">absent</span></td>
そのため、どういうわけか私の < および > 記号が取り除かれています。
画面上の単語が「absent」と書かれているときに赤色になるようにコードを変更するにはどうすればよいですか? 「不在」の赤に一致する画面上のテキストに色を付ける簡単な方法はありますか?
参考までに、私のページの残りの JavaScript を次に示します。
var userId;
var attendanceDay;
var isPresent;
var updateAttendanceUrl;
var absentText;
var presentText;
var courseId;
$(document).ready(function (event) {
$('.attendance').live('click', function () {
userId = $(this).parents('tr').attr('id');
if (userId != '') {
attendanceDay = $(this).attr('id');
isPresent = $.trim($(this).find('span').text().toLowerCase());
courseId = $(this).parents('tbody').attr('id');
$(this).find('span').addClass('currentClass');
if (isPresent == absentText) {
UpdateAttendance(1);
} else {
UpdateAttendance(0);
}
} else {
event.preventDefault();
}
});
});
function UpdateAttendance(present) {
url = updateAttendanceUrl;
$.ajax({
type: "POST",
url: url,
data: "userId=" + userId + "&attendanceDay=" + attendanceDay + "&courseId=" + courseId + "&present=" + present,
success: function (data) {
if (isPresent == absentText) {
$('#' + userId).find('.currentClass').text(presentText).removeAttr('class');
} else {
$('#' + userId).find('.currentClass').text(absentText).removeAttr('class');
}
return true;
}
});
}