javascript - 如何将多个ID转换为一个类？

Question

我在一个页面中有多个星期一、星期二，所以我想将 id="Monday3"替换为 class="Monday"，而不是在我所有的时间框 html 中频繁添加数字

var now3 = new Date();
var checkTime3 = function() {
var today = weekday3[now3.getDay()];
var dayOfWeek = now3.getDay();
var hour = now3.getHours();
var minutes = now3.getMinutes();

//add AM or PM
var suffix = hour >= 12 ? "PM" : "AM";


// add 0 to one digit minutes
if (minutes < 10) {
minutes = "0" + minutes
};

if ((dayOfWeek == 0 || dayOfWeek == 1 || dayOfWeek == 2 || dayOfWeek == 3 || dayOfWeek == 4 ) && hour >= 10 && hour <= 21) {
hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15

timeDiv3.innerHTML =  today ;

}

else if ((dayOfWeek == 5 || dayOfWeek == 6) && hour >= 10 && hour <= 22) {
hour = ((hour + 11) % 12 + 1);

timeDiv3.innerHTML =  today;

}

else {
if (hour == 0 || hour > 9) {
  hour = ((hour + 11) % 12 + 1); //i.e. show 1:15 instead of 13:15
}

timeDiv3.innerHTML = today;

}
};

var weekday3 = new Array(7);
weekday3[0] = "Sunday3";
weekday3[1] = "Monday3";
weekday3[2] = "Tuesday3";
weekday3[3] = "Wednesday3";
weekday3[4] = "Thursday3";
weekday3[5] = "Friday3";
weekday3[6] = "Saturday3";

var currentDay3 = weekday3[now3.getDay()];
var currentDayID3 = "#" + currentDay3; //gets todays weekday and turns it into id
$(currentDayID3).toggleClass("today"); //hightlights today in the view hours modal popup'

setInterval(checkTime3, 1000);
checkTime3();

.highlight{
  background:#FFFF00;
}

.dateTime  {
  max-width: 320px;
  margin: 0 auto;
}

.day {
  display: inline-block;
  float: left;
}

.time {
  display: inline-block;
  float: right
}

.today {
  color: rgb(200, 85, 39);
  font-weight: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="Monday3" class="dateTime">
<div class="day">Monday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday3" class="dateTime">
<div class="day">Tuesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday3" class="dateTime">
<div class="day">Wednesday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday3" class="dateTime">
<div class="day">Thursday</div>
<div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday3" class="dateTime">
<div class="day">Friday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday3" class="dateTime">
<div class="day">Saturday</div>
<div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday3" class="dateTime">
<div class="day">Sunday</div>
<div class="time">10am - 10pm</div>
</div>

Answer 1

你的意思是

$(".dateTime").each(function() {
  $(this).addClass(this.id.slice(0, -1).toLowerCase());
  console.log(this.className)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div id="Monday3" class="dateTime">
  <div class="day">Monday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday3" class="dateTime">
  <div class="day">Tuesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday3" class="dateTime">
  <div class="day">Wednesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday3" class="dateTime">
  <div class="day">Thursday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday3" class="dateTime">
  <div class="day">Friday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday3" class="dateTime">
  <div class="day">Saturday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday3" class="dateTime">
  <div class="day">Sunday</div>
  <div class="time">10am - 10pm</div>
</div>