CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Angel Ramirez
Angel Ramirez

Reputation: 77

How to convert multiple IDs to a class?

I have more than one monday, tues in one page so I want to replace the id="Monday3" to class="Monday" and not be adding a number frequently for all my time box 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>

Upvotes: 0

Views: 80

Answers (2)

Nitin
Nitin

Reputation: 48

Didn't understand exact what you want but you can use class in html like this and need to update javascript too for this. HTML Code:

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

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

Let me know if this work for you.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

You mean

$(".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>

Upvotes: 1

Related Questions