我在做日歷,我有 98 個功能可以自動化。實際上一切正常(對于第 3 次測驗),但我不想復制粘貼 98 次相同的功能并每次都切換所有內容。
這是我的代碼,所以你可以理解。(有 3 個第一個函式,我想要 98 個這樣的):
var heure8 = document.getElementById('h8').textContent;
var heure9 = document.getElementById('h9').textContent;
var heure10 = document.getElementById('h10').textContent;
var heure11 = document.getElementById('h11').textContent;
var heure12 = document.getElementById('h12').textContent;
var heure13 = document.getElementById('h13').textContent;
var heure14 = document.getElementById('h14').textContent;
var heure15 = document.getElementById('h15').textContent;
var heure16 = document.getElementById('h16').textContent;
var heure17 = document.getElementById('h17').textContent;
var heure18 = document.getElementById('h18').textContent;
var heure19 = document.getElementById('h19').textContent;
var heure20 = document.getElementById('h20').textContent;
var heure21 = document.getElementById('h21').textContent;
var heure22 = document.getElementById('h22').textContent;
document.getElementById('x1').addEventListener('click', creneau)
var ajout = 0;
function creneau(){
var date1 = document.getElementById('w1').innerText;
var date2 = document.getElementById('w2').innerText;
var date3 = document.getElementById('w3').innerText;
var date4 = document.getElementById('w4').innerText;
var date5 = document.getElementById('w5').innerText;
var date6 = document.getElementById('w6').innerText;
var date7 = document.getElementById('w7').innerText;
x1 = heure8 ' à ' heure9 ' le ' date1;
if((ajout == 2)){
ajout = 0;
}
{
ajout = 1;
console.log(ajout)
}
if (ajout===1) {
document.getElementById('r1').innerHTML = x1;
}
if(ajout===2) {
document.getElementById('r1').innerHTML = '';
}
}
document.getElementById('x2').addEventListener('click', creneau2)
var ajout2 = 0;
function creneau2(){
var date1 = document.getElementById('w1').innerText;
var date2 = document.getElementById('w2').innerText;
var date3 = document.getElementById('w3').innerText;
var date4 = document.getElementById('w4').innerText;
var date5 = document.getElementById('w5').innerText;
var date6 = document.getElementById('w6').innerText;
var date7 = document.getElementById('w7').innerText;
var x2 = heure9 ' à ' heure10 ' le ' date1;
if((ajout2 == 2)){
ajout2 = 0;
}
{
ajout2 = 1;
console.log(ajout2)
}
if (ajout2===1) {
document.getElementById('r2').innerHTML = x2;
}
if(ajout2===2) {
document.getElementById('r2').innerHTML = '';
}
}
document.getElementById('x3').addEventListener('click', creneau3)
var ajout3 = 0;
function creneau3(){
var date1 = document.getElementById('w1').innerText;
var date2 = document.getElementById('w2').innerText;
var date3 = document.getElementById('w3').innerText;
var date4 = document.getElementById('w4').innerText;
var date5 = document.getElementById('w5').innerText;
var date6 = document.getElementById('w6').innerText;
var date7 = document.getElementById('w7').innerText;
var x3 = heure10 ' à ' heure11 ' le ' date1;
if((ajout3 == 2)){
ajout3 = 0;
}
{
ajout3 = 1;
console.log(ajout3)
}
if (ajout3===1) {
document.getElementById('r3').innerHTML = x3;
}
if(ajout3===2) {
document.getElementById('r3').innerHTML = '';
}
}
為此,一切都很好,但如果你們有想法,我只想做一個可以為我的 98div 做的功能:p 非常感謝,Zartex。
uj5u.com熱心網友回復:
將陣列用于可重復資料資料的序列,并回圈for遍歷它們。
let ajout_list = []
let x_list = []
for (let idx = 1; idx <= 98; idx ) {
ajout_list[idx] = 0;
document.getElementById('x' idx).addEventListener('click', function() {
// your repeated code
// ugh... did you mean ajout there, because there's no way it will be 2 just a line below if you
// never modified it since start of function?
x_list[idx] = heure10 ' à ' heure11 ' le ' date1;
if((ajout_list[idx] == 2)){
ajout_list[idx] = 0;
}
// rest of your code modified along same lines
})
}
uj5u.com熱心網友回復:
首先,您可以使用回圈從 HTML 中獲取元素,如下所示:
creneau(elem) {
let id = elem.id;
for (let i = 1; i < 8; i ) {
var date1 = document.getElementById(`w${i}`).innerText;
}
x1 = heure8 ' à ' heure9 ' le ' date1;}
其次,如果您有三個函式并且它們都在做同樣的事情,只需在 js 上撰寫一次并在 HTML 端使用引數呼叫該函式。例如:
<input type="button" id="creneau" onclick="creneau(this)">
<input type="button" id="creneau1" onclick="creneau(this)">
<input type="button" id="creneau2" onclick="creneau(this)">
如果您有任何新問題,請隨時回答。
uj5u.com熱心網友回復:
我檢查了你的代碼。我決定把你太多的代碼改成一小段代碼。我洗掉了大部分 HTML 并將其轉移到 JS。剛剛添加了 1 個 CSS 并準備了一切來解決您的問題。我只使用了 2 個 js 函式來繪制表格和 onClick 事件。現在,您可以使用這些函式來總結和減少您的代碼以使其正常作業。祝你好運。
function drawTable() {
const users = [];
users.push('LUNDI');
users.push('LUNDI');
users.push('LUNDI');
users.push('LUNDI');
users.push('LUNDI');
users.push('LUNDI');
users.push('LUNDI');
let text = "";
let first = 1;
let second = 14;
for (let i = 0; i < users.length; i ) {
text = `<div id="w${i 1}" unselectable="on">${users[i]}</div>`
for (let j = first; j <= second; j ) {
text = `<div id="x${j}" onclick='clicked(x${j})' ></div>`
}
first = second 1;
second = 14;
}
document.getElementById('contenugrid').innerHTML = text;
}
function clicked(param) {
console.log(param);
}
.calendar {
font-family: sans-serif;
height: 650px;
width: 1450px;
margin-right: 100px;
margin-left: 50px;
margin-top: 3%;
margin-bottom: 3%;
border: solid black 2px;
border-radius: 7px;
overflow: hidden;
background: #5c0716;
}
.corps3 {
width: 100%;
}
.bg {
border-top: solid black 1px;
border-left: solid black 1px;
border-top-left-radius: 7px;
background-color: #707070;
border-bottom: solid black 1px;
border-right: solid black 1px;
}
.contenugrid {
display: grid;
grid-template-columns: repeat(15, 8fr);
cursor: pointer;
margin-bottom: 10px;
}
.gridtailledate {
width: 150px;
height: calc(650px/8);
}
.gridtaille {
width: calc(1300px/14);
float: right;
}
.center {
text-align: center;
justify-content: center;
margin-left: 85px;
}
.center2 {
text-align: center;
justify-content: center;
margin-left: 70px;
}
.center3 {
text-align: center;
justify-content: center;
margin-left: 75px;
}
.center4 {
text-align: center;
justify-content: center;
margin-left: 67px;
}
.couleurbackbody2 {
background-color: #222222;
z-index: 0;
}
.borderdown {
border-top: white solid 2px;
}
.bordertop {
border-bottom: white solid 2px;
}
.ontop {
padding-bottom: 50px;
}
.ondown {
padding-top: 50px;
}
span {
display: inline-block;
text-align: center;
}
.Coachname {
text-align: left;
position: absolute;
color: white;
margin-top: -10px;
right: 87%;
font-family: 'Amatic SC', cursive;
font-size: 50px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}
.fontstyle {
font-family: 'Roboto Condensed', sans-serif;
font-style: italic;
font-size: 25px;
}
.fontstyleN {
font-family: 'Roboto Condensed', sans-serif;
font-style: italic;
}
.aa {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 87.9%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.bb {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 83.4%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.cc {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 78.25%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.dd {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 73.1%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.ee {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 68.2%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.ff {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 63.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.gg {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 58.4%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.hh {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 53.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.ii {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 48.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.jj {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 43.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.kk {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 38.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.ll {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 33.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.mm {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 28.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.nn {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 23.3%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.oo {
font-family: 'Amatic SC', cursive;
font-size: 27px;
right: 19.7%;
padding-top: 42px;
position: absolute;
margin-top: -12px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
color: white;
}
.policedate {
font-family: 'Amatic SC', cursive;
font-weight: bolder;
font-size: 25px;
color: black;
}
.shadow {
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}
.weeks {
position: absolute;
color: black;
text-align: center;
z-index: 4;
margin-left: 50%;
}
.arrowleft {
color: #5c0716;
right: 61%;
position: absolute;
bottom: 74%;
}
.arrowright {
color: #5c0716;
left: 61%;
position: absolute;
bottom: 74%;
}
.try {
color: white;
position: absolute;
text-align: center;
width: 100%;
height: 40px;
padding-top: 16px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
font-family: 'Amatic SC', cursive;
font-size: 30px;
}
.try2 {
color: white;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
font-family: 'Amatic SC', cursive;
font-size: 30px;
text-align: center;
padding-top: 25px;
}
.coachtopleft {
font-family: 'Amatic SC';
font-size: 60px;
text-align: center;
padding-top: 30px;
color: black;
}
.recap {
width: 280px;
height: 550px;
border: black solid 2px;
position: absolute;
right: 50px;
margin-top: 3%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
background-color: #5c0716;
text-align: center;
}
.buttonpay {
width: 280px;
height: 90.4px;
border: black solid 2px;
position: absolute;
right: 50px;
margin-top: 33%;
border-radius: 7px;
background-color: #5c0716;
}
.textrecap {
font-family: 'Amatic SC', cursive;
font-weight: bolder;
font-size: 30px;
margin-top: 24px;
color: black;
line-height: 35px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}
.borderrecap {
width: 276px;
height: 81.25px;
border-bottom: solid black 2px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
bottom: 84.8%;
position: absolute;
}
.textpay {
font-family: 'Amatic SC', cursive;
font-weight: bolder;
font-size: 35px;
margin-top: 7px;
color: black;
line-height: 35px;
text-align: center;
margin-top: 26px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}
.indexz {
overflow: hidden;
text-align: center;
width: auto;
height: fit-content;
margin-top: 10px;
font-family: 'Amatic SC', cursive;
font-weight: bolder;
font-size: 25px;
margin-top: 25px;
z-index: -1;
}
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Resatxt {
font-family: 'Amatic SC', cursive;
font-weight: bolder;
color: white;
font-size: 25px;
text-align: center;
padding-top: 25px;
}
.creneautxt {
font-family: 'Amatic SC', cursive;
font-weight: bolder;
font-size: 23px;
color: black;
line-height: 35px;
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
}
.margintop {
margin-top: 40px;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body onload="drawTable()">
<div id="recap" class="recap">
<p unselectable="on" class="textrecap unselectable">RECAPITULATIF DE LA COMMANDE</p>
<div class="margintop">
<div class="creneautxt" id="r1"></div>
<div class="creneautxt" id="r2"></div>
<div class="creneautxt" id="r3"></div>
</div>
<div class="borderrecap"></div>
</div>
<div class="buttonpay ">
<p class="textpay unselectable" unselectable="on">RéSERVER</p>
</div>
<div class="calendar">
<div class="contenugrid" id="contenugrid">
<div class="gridtailledate coachtopleft unselectable" unselectable="on">ZARTEX</div>
<div class="gridtaille">
<div id="h8" class="aa unselectable" unselectable="on">8:00</div>
</div>
<div class="gridtaille">
<div id="h9" class="bb unselectable" unselectable="on">9:00</div>
</div>
<div class="gridtaille">
<div id="h10" class="cc unselectable" unselectable="on">10:00</div>
</div>
<div class="gridtaille">
<div id="h11" class="dd unselectable" unselectable="on">11:00</div>
</div>
<div class="gridtaille">
<div id="h12" class="ee unselectable" unselectable="on">12:00</div>
</div>
<div class="gridtaille">
<div id="h13" class="ff unselectable" unselectable="on">13:00</div>
</div>
<div class="gridtaille">
<div id="h14" class="gg unselectable" unselectable="on">14:00</div>
</div>
<div class="gridtaille">
<div id="h15" class="hh unselectable" unselectable="on">15:00</div>
</div>
<div class="gridtaille">
<div id="h16" class="ii unselectable" unselectable="on">16:00</div>
</div>
<div class="gridtaille">
<div id="h17" class="jj unselectable" unselectable="on">17:00</div>
</div>
<div class="gridtaille">
<div id="h18" class="kk unselectable" unselectable="on">18:00</div>
</div>
<div class="gridtaille">
<div id="h19" class="ll unselectable" unselectable="on">19:00</div>
</div>
<div class="gridtaille">
<div id="h20" class="mm unselectable" unselectable="on">20:00</div>
</div>
<div class="gridtaille">
<div id="h21" class="nn unselectable" unselectable="on">21:00</div>
<div id="h22" class="oo unselectable" unselectable="on">22:00</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/389840.html
標籤:javascript
上一篇:更改映射陣列內單擊目標的狀態
