javascript - 相同的 javascript 不适用于类似的元素
问题描述
IDK 为什么,但脚本适用于#last_name
而不适用于#first_name
last_name
就像它应该的那样,但不是first_name
请解释解决方案,我检查了代码并尽我所能。
//i also worked on an alternative code but it only worked one time:
//here is the code that worked only once
let first_name = document.getElementById("first_name");
let last_name = document.getElementById("last_name");
const color_swap = () => {
first_name.style.color = "rgb(255,255,255)";
last_name.style.color = "rgb(254, 215, 3)";
setInterval(() => {
first_name.style.color = "rgb(254, 215, 3)";
last_name.style.color = "rgb(255,255,255)";
}, 2000);
};
window.addEventListener("load", color_swap);
//so how do i iterate it?
// ---------home----------
let first_name = document.getElementById('first_name');
let last_name = document.getElementById('last_name');
first_name.style.color = 'rgb(255,255,255)';
const color_swap = () => setInterval(()=>{
first_name.style.color = first_name.style.color == 'rgb(255,255,255)' ? 'rgb(254, 215, 3)' : 'rgb(255,255,255)';
last_name.style.color = last_name.style.color == 'rgb(254, 215, 3)' ? 'rgb(255,255,255)' : 'rgb(254, 215, 3)';
},1000);
window.addEventListener('load', color_swap);
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
/* ---------------css reset------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
font-family: "Montserrat", sans-serif;
font-weight: 300;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*-----------------------------*/
.home {
height: 35rem;
background-color: #000;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0rem 12rem;
}
.text h1{
margin: 2rem 0rem;
font-size: 4rem;
}
.text p {
color: #fff;
font-size: 1.5rem;
font-weight: 200;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7a300e81b2.js"
crossorigin="anonymous"
></script>
<title>Portfolio</title>
</head>
<body>
<div class="home" id="home">
<div class="text">
<p>Hi, I am</p>
<h1 id="first_name">Harsh <span id="last_name">Sunwani</span></h1>
<p>A Web Developer in Training</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
解决方案
怎么样:
let first_name = document.getElementById("first_name");
let last_name = document.getElementById("last_name");
const color_swap = () => {
let whitefirst = true;
setInterval(() => {
if (whitefirst) {
first_name.style.color = "rgb(254, 215, 3)";
last_name.style.color = "rgb(255,255,255)";
} else {
first_name.style.color = "rgb(255,255,255)";
last_name.style.color = "rgb(254, 215, 3)";
}
whitefirst = !whitefirst;
}, 2000);
};
window.addEventListener("load", color_swap);
.home {
height: 20rem;
background-color: #000;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0rem 2rem;
}
.text h1{
margin: 2rem 0rem;
font-size: 4rem;
}
.text p {
color: #fff;
font-size: 1.5rem;
font-weight: 200;
}
<div class="home" id="home">
<div class="text">
<p>Hi, I am</p>
<h1>
<span id="first_name" style="color:white">Harsh</span>
<span id="last_name" style="color:#fed703">Sunwani</span>
</h1>
<p>A Web Developer in Training</p>
</div>
</div>
解释:
- 要连续交换颜色,您需要一个标志来指示它是处于状态 A 还是处于状态 B。我使用的标志名为
whitefirst
。 - 每次迭代后,您必须切换标志。我通过简单地否定它来做到这一点,所以如果它是真的,它就会变成假的,如果它是假的,它就会变成真的。
- 你封装
last_name
在first_name
.<h1>
当您更改 的属性时first_name
,它们将last_name
同时应用于。虽然它适用于这种情况,但如果您的需求发生轻微变化,它可能会产生意想不到的后果。因此,将两者拆分为独立元素(两个<span>
s)是没有害处的。
推荐阅读
- android - 升级到 Pie(9.0) 后,React 本机 Android 构建卡住了
- excel - Excel VBA删除列中数字上方的一行
- android - 当我在 Nougat 上杀死我的应用程序时,服务无法在后台运行
- css - React Native View 不包含在该 View 中作为子项编写的 Text 组件?
- javascript - 迭代通常适用于 Map()、Set().. 但会违反承诺
- sapui5 - sapui5 smarttable棒属性
- android - 获取电池电量
- excel - 列的 Excel 条件格式
- sql-server - 如何在不使用 SQL Server 中的 where 查询的情况下从第 5 行中选择记录
- javascript - 多多边形 SVG 选择(填充颜色)和蒙版导出到图像