如何使用相同的字符串

Question

我试图为所有人编写一次javascript，而不必反复更改字符串名称，基本上更改字符串名称。一个字符串名称适用于所有人。我将在同一页面中为不同的商店提供不同的周历日历。我想保留尽可能少的代码或者我必须更改字符串名称

var now = new Date();
var days = ['Sunday02', 'Monday02', 'Tuesday02', 'Wednesday02', 'Thursday02', 'Friday02', 'Saturday02'];

var today = days[now.getDay()]; //code to assign todays day to variable
document.getElementById(today).style.background = '#FFFF00';

//$("#"+today).addClass("highlight"); //Jquery


var now = new Date();
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

var today = days[now.getDay()]; //code to assign todays day to variable
document.getElementById(today).style.background = '#FFFF00';

//$("#"+today).addClass("highlight"); //Jquery

.highlight {
  background: #FFFF00;
}

<h2>We're Open At These Times Store 1</h2>
<div id="Monday" class="dateTime">
  <div class="day">Monday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday" class="dateTime">
  <div class="day">Tuesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday" class="dateTime">
  <div class="day">Wednesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday" class="dateTime">
  <div class="day">Thursday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday" class="dateTime">
  <div class="day">Friday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday" class="dateTime">
  <div class="day">Saturday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday" class="dateTime">
  <div class="day">Sunday</div>
  <div class="time">10am - 10pm</div>
</div>


<h2>We're Open At These Times Store 2</h2>
<div id="Monday02" class="dateTime">
  <div class="day">Monday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Tuesday02" class="dateTime">
  <div class="day">Tuesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Wednesday02" class="dateTime">
  <div class="day">Wednesday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Thursday02" class="dateTime">
  <div class="day">Thursday</div>
  <div class="time">10am - 10pm</div>
</div>
<br>
<div id="Friday02" class="dateTime">
  <div class="day">Friday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Saturday02" class="dateTime">
  <div class="day">Saturday</div>
  <div class="time">10am - 11pm</div>
</div>
<br>
<div id="Sunday02" class="dateTime">
  <div class="day">Sunday</div>
  <div class="time">10am - 10pm</div>
</div>

Answer 1

您可以将商店和日程安排在数组（stores）中。其余代码将自动显示此数组中的存储和计划。如果您需要另一个商店，则将其添加到数组中并保留其余代码。

代码将首先迭代数组以创建要插入<div>

内的DOM元素

第二部分将找到具有当前类的元素，并将添加类highlight

const stores = [{
  name: 'Store A',
  schedule: {
    monday: '10am - 10pm',
    tuesday: '10am - 10pm',
    wednesday: '10am - 10pm',
    thursday: '10am - 10pm',
    friday: '10am - 11pm',
    saturday: '10am - 11pm',
    sunday: '10am - 11pm'
  }
}, {
  name: 'Store B',
  schedule: {
    monday: '10am - 10pm',
    tuesday: '10am - 10pm',
    wednesday: '10am - 10pm',
    thursday: '10am - 10pm',
    friday: '10am - 11pm',
    saturday: '10am - 11pm',
    sunday: '10am - 11pm'
  }
}];
//Display the schedule for each stores
let content = document.getElementById("content");
let html = "";
stores.forEach(s => {
  html += `<h2>We're open at these times : ${s.name}</h2>`;
  for(let k in s.schedule){
    html += `<div class="${k}"><div class="day">${k.toUpperCase()}</div><div class="time">${s.schedule[k]}</div></div><br>`;
  }
});
content.innerHTML = html;

//Highlight today hours
const days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
const now = new Date();
const dayName = days[now.getDay()].toLowerCase();;
let daysToHighlight = document.getElementsByClassName(dayName);

for(let i=0; i<daysToHighlight.length; i++){
  daysToHighlight[i].className += ' highlight';
}

.highlight {
  background: #FFFF00;
}

<div id="content"></div>