javascript - 尝试在单击“下一个”或“上一个”按钮时替换 className
问题描述
我正在尝试实现真正基本的 javascript 代码来替换 classNames 'onclick'，但它不起作用并且让我发疯！我觉得我错过了一些非常简单的东西，比如额外的花括号或代码定位，但我无法识别它，这让我发疯！
这是代码，
var photoOne = document.getElementByClassName("photo1");
var photoTwo = document.getElementByClassName("photo2");
var photoThree = document.getElementByClassName("photo3");
function plusSlides() {
photoOne.className.replace("photo1", "photo2");
photoTwo.className.replace("photo2", "photo3");
photoThree.className.replace("photo3", "photo1");
}
function backSlides() {
photoOne.className.replace("photo1", "photo3");
photoTwo.className.replace("photo2", "photo1");
photoThree.className.replace("photo3", "photo2");
}<head>
<link rel="stylesheet" type="text/css" href="css/Homepage.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<style>
body {
margin: 0;
background: linear-gradient(90deg, yellow, orange);
color: #a9040d;
text-shadow: 1px 1px black;
font-size: 1.5rem;
font-family: Forte, "Times New Roman";
}
nav {
height: 4rem;
overflow: hidden;
}
nav a {
float: left;
background-color: transparent;
text-decoration: none;
padding: 0.5rem;
color: #a9040d;
}
nav a:hover {
background: rgb(255, 204, 102);
background: rgb(255, 204, 102 0.5);
color: black;
}
nav a.active {
background: rgb(255, 255, 153);
background: rgb(255, 255, 153 0.5);
}
.logo {
float: left;
width: 15rem;
height: auto;
margin-top: -1rem;
}
.intro {
display: flex;
flex-direction: row;
height: 25rem;
width: 100%;
background: transparent;
margin-top: 6rem;
padding: 2rem;
}
.intro-text {
height: 20rem;
width: 40rem;
margin: 2.5rem 10rem 0rem 5rem;
}
.photo1 {
height: 20rem;
width: 18rem;
padding: 1rem 1rem 2rem 1rem;
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
text-align: center;
z-index: 2;
}
.img1 {
width: 100%;
height: auto;
}
.photo-text {
margin-top: 0rem;
font-size: 2.5rem;
font-family: "Brush Script MT";
color: #202020;
text-shadow: none;
}
.photo2 {
position: absolute;
top: 10rem;
right: 15rem;
height: 18rem;
width: 18rem;
padding: 1rem 1rem 4rem 1rem;
transform: rotate(14deg);
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
z-index: 1;
}
.photo3 {
position: absolute;
top: 6rem;
right: 10rem;
height: 18rem;
width: 18rem;
padding: 1rem 1rem 4rem 1rem;
transform: rotate(30deg);
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
z-index: 0;
}
.prev {
cursor: pointer;
position: absolute;
top: 20rem;
left: 53%;
width: auto;
padding: 1rem;
color: #a9040d;
font-weight: bold;
user-select: none;
}
.next {
cursor: pointer;
position: absolute;
right: 5%;
top: 20rem;
width: auto;
padding: 1rem;
color: #a9040d;
font-weight: bold;
user-select: none;
}
.prev:hover {
background-color: rgba(255, 165, 0, 0.8);
}
.next:hover {
background-color: rgba(255, 255, 0, 0.8);
}
</style>`
</head>
<body>
<header>
<nav>
<a class="active" href="#">Home</a>
<a href="#">Our Story</a>
<a href="#">Menu</a>
<a href="#">Gallery</a>
<a href="#">Where to find us</a>
</nav>
<img class="logo" src="Logo/Logo Transparent Retina.PNG">
</header>
<section class="intro">
<div class="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a class="prev" onclick="plusSlides"><</a>
<a class="next" onclick="backSlides">></a>
<div class="photo1">
<img class="img1" src="Images/Staff.JPG" alt="Meet the Staff">
<h4 class="photo-text">Meet the Staff</h4>
</div>
<div class="photo2">
<img class="img1" src="Images/Food.JPG" alt="A dish prepared by Pat">
<h4 class="photo-text">Delicioso!</h4>
</div>
<div class="photo3">
<img class="img1" src="Images/Cake.JPG" alt="Having fun with clients and cake">
<h4 class="photo-text">Happy Birthday!</h4>
</div>
</section>
</body>解决方案
取而代之的是 getElementsByClassName，您可以使用 querySelector，然后您可以设置新类，例如使用 photoOne.className="photo3"
var photoOne = document.querySelector(".photo1");
var photoTwo = document.querySelector(".photo2");
var photoThree = document.querySelector(".photo3");
function plusSlides() {
photoOne.className="photo2";
photoTwo.className="photo3";
photoThree.className="photo1";
}
function backSlides() {
photoOne.className="photo3";
photoTwo.className="photo1";
photoThree.className="photo2";
}<head>
<link rel="stylesheet" type="text/css" href="css/Homepage.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<style>
body {
margin: 0;
background: linear-gradient(90deg, yellow, orange);
color: #a9040d;
text-shadow: 1px 1px black;
font-size: 1.5rem;
font-family: Forte, "Times New Roman";
}
nav {
height: 4rem;
overflow: hidden;
}
nav a {
float: left;
background-color: transparent;
text-decoration: none;
padding: 0.5rem;
color: #a9040d;
}
nav a:hover {
background: rgb(255, 204, 102);
background: rgb(255, 204, 102 0.5);
color: black;
}
nav a.active {
background: rgb(255, 255, 153);
background: rgb(255, 255, 153 0.5);
}
.logo {
float: left;
width: 15rem;
height: auto;
margin-top: -1rem;
}
.intro {
display: flex;
flex-direction: row;
height: 25rem;
width: 100%;
background: transparent;
margin-top: 6rem;
padding: 2rem;
}
.intro-text {
height: 20rem;
width: 40rem;
margin: 2.5rem 10rem 0rem 5rem;
}
.photo1 {
height: 20rem;
width: 18rem;
padding: 1rem 1rem 2rem 1rem;
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
text-align: center;
z-index: 2;
}
.img1 {
width: 100%;
height: auto;
}
.photo-text {
margin-top: 0rem;
font-size: 2.5rem;
font-family: "Brush Script MT";
color: #202020;
text-shadow: none;
}
.photo2 {
position: absolute;
top: 10rem;
right: 15rem;
height: 18rem;
width: 18rem;
padding: 1rem 1rem 4rem 1rem;
transform: rotate(14deg);
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
z-index: 1;
}
.photo3 {
position: absolute;
top: 6rem;
right: 10rem;
height: 18rem;
width: 18rem;
padding: 1rem 1rem 4rem 1rem;
transform: rotate(30deg);
background-image: url(https://images.pexels.com/photos/1260727/pexels-photo-1260727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-size: cover;
z-index: 0;
}
.prev {
cursor: pointer;
position: absolute;
top: 20rem;
left: 53%;
width: auto;
padding: 1rem;
color: #a9040d;
font-weight: bold;
user-select: none;
}
.next {
cursor: pointer;
position: absolute;
right: 5%;
top: 20rem;
width: auto;
padding: 1rem;
color: #a9040d;
font-weight: bold;
user-select: none;
}
.prev:hover {
background-color: rgba(255, 165, 0, 0.8);
}
.next:hover {
background-color: rgba(255, 255, 0, 0.8);
}
</style>`
</head>
<body>
<header>
<nav>
<a class="active" href="#">Home</a>
<a href="#">Our Story</a>
<a href="#">Menu</a>
<a href="#">Gallery</a>
<a href="#">Where to find us</a>
</nav>
<img class="logo" src="Logo/Logo Transparent Retina.PNG">
</header>
<section class="intro">
<div class="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a class="prev" onclick="plusSlides()"><</a>
<a class="next" onclick="backSlides()">></a>
<div class="photo1">
<img class="img1" src="Images/Staff.JPG" alt="Meet the Staff">
<h4 class="photo-text">Meet the Staff</h4>
</div>
<div class="photo2">
<img class="img1" src="Images/Food.JPG" alt="A dish prepared by Pat">
<h4 class="photo-text">Delicioso!</h4>
</div>
<div class="photo3">
<img class="img1" src="Images/Cake.JPG" alt="Having fun with clients and cake">
<h4 class="photo-text">Happy Birthday!</h4>
</div>
</section>
</body>推荐阅读
- javascript - 调整浏览器窗口大小并截图
- python-3.x - 从python中的文件名中删除特定的代号和日期
- node.js - 发布时来自 Node.js 客户端的长响应心跳
- spring-security - SpringBoot 被 CORS 策略阻止
- javascript - 如何打开 2 个流（视频和屏幕）并在它们之间切换
- jsf - 部署期间的 Java EE 严重错误：java.lang.NullPointerException
- mysql - 如何将计算值与选择查询中的值一起插入？
- xbox-one - Xbox Live 聊天机器人示例
- java - 云环境中的异步任务
- firebase - 禁用动态链接的手动构建 url