javascript - 按钮先单击 2 次,然后根据需要工作
问题描述
我的代码可能有一些问题,但我无法找到它,因为我是一个非常新的开发人员。
我正在学习 javascript 3 周,但我有一个问题,当我创建任何点击功能时,它首先需要两次点击才能工作,然后它工作正常但再次重新加载它似乎相同。
let slider = document.querySelector(".container");
let buttonPull = document.querySelector(".slide-btn")
buttonPull.addEventListener('click', () => {
if (slider.style.right == "-50px") {
slider.style.right = "0px";
buttonPull.style.transform = "rotateY(180deg)";
} else {
slider.style.right = "-50px"
buttonPull.style.transform = "rotateY(360deg)";
}
})
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(235, 235, 235);
}
.container {
z-index: 0;
position: fixed;
right: -50px;
top: 50%;
transform: translateY(-50%);
height: 250px;
width: 50px;
transition: all ease-in-out 0.25s;
}
.slide {
z-index: 1;
position: absolute;
height: 100%;
width: 100%;
background-color: rgb(0, 102, 255);
display: flex;
}
.slide-btn {
display: flex;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
background-color: transparent;
border-style: none;
left: -25px;
font-weight: bolder;
font-size: larger;
top: 102px;
/* transform: rotateY(180deg); */
transform-origin: 50%;
z-index: 3;
height: 40px;
width: 20px;
cursor: pointer;
font-size: large;
color: rgb(0, 102, 255);
transition: step-start 0.3s;
}
<!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">
<title>slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="slide"></div>
<button class="slide-btn">❮</button>
</div>
<script src="index.js"></script>
</body>
</html>
解决方案
推荐阅读
- javascript - Google 应用程序脚本从文档中获取键码事件
- vb.net - 在 vb.net 中动态排序和过滤自定义对象列表
- google-apps-script - 将脚本更改为仅粘贴值并将最终复制文件命名为单元格值
- computer-science - 如何构造对应于以下语法的NPDA?
- python - 如果它是我创建的类,我如何声明变量的类型?(Python)
- r - 如何多次对具有设定均值和标准差的正态分布总体进行抽样
- excel - 复制动态表
- javascript - 如何跳过给定css属性的字符串中的第一个参数?
- apache-nifi - 如何在 nifi 中一次处理单个流文件?
- c++ - 使用带有基准的异步记录器时 spdlog 的性能相对较低