Question

我有一个以上的星期一，在一个页面中的tues所以我想将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

你的意思是

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

不明白你想要什么，但你可以在这样的html中使用类，并且需要为此更新javascript。 HTML代码：

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

JavaScript代码：

var currentDay3 = weekday3[now3.getDay()];
var currentDayID3 = "." + currentDay3; //gets todays weekday and turns it into class
$(currentDayID3).toggleClass("today");

让我知道这是否适合您。

如何将多个ID转换为类？

2 个答案: