这是一个简单的问题。如果我点击该框, 我想向左移动200px。但是对我来说很难,请帮助我! 问题出在哪里?
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
</style>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
const move = document.getElementsByClassName("box");
move.addEventListener("click", _move);
function _move(e) {
move.classList.add("playing");
}
答案 0 :(得分:4)
document.getElementsByClassName()
返回一个HTMLCollection
,而不是单个元素,因此您必须将事件侦听器附加到集合中的每个元素。
const move = document.getElementsByClassName("box");
[...move].forEach(m => m.addEventListener("click", _move));
function _move() {
this.classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
答案 1 :(得分:1)
getElementsByClassName返回数组,因此您需要给出索引
var move = document.getElementsByClassName("box");
move[0].addEventListener("click", _move);
function _move(e) {
move[0].classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
答案 2 :(得分:1)
您将其向左移动的css属性不正确。 应该是
.playing {
transform: translateX(200px);
}
答案 3 :(得分:0)
您也可以使用它。代替使用 document.getElementsByClassName ,而使用 document.querySelector
const move = document.querySelector(".box");
move.addEventListener("click", _move);
function _move(e) {
move.classList.add("playing");
}
.box {
width: 200px;
height: 200px;
background-color: red;
}
.playing {
transform: translate(200px);
}
<div class="box"></div>
答案 4 :(得分:0)
由于此问题已经解决,但我只是在尝试是否有人要通过单击框连续移动框,那么此代码将很有帮助。
<head>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
let offset = 0;
const move = document.getElementsByClassName("box")[0];
move.addEventListener("click", _move);
function _move(e) {
offset += 200;
move.style.left = offset + 'px';
}
</script>
</body>
答案 5 :(得分:0)
$(document).ready(function(){
$('#button-one').click(function(){
$('#box-one').css("transform","translate(200px,0)");
});
});
$(document).ready(function(){
$('#button-two').click(function(){
$('#box-two').css("transform","translate(250px,0)");
});
});
$(document).ready(function(){
$('#button-three').click(function(){
$('#box-one, #box-two').css("transform","translate(0px,0)");
});
});
#box-one,
#box-two
{
width: 100px;
height: 100px;
background-color: blue;
}
#box-two
{
transition: transform 0.6s ease;
}
#button-three
{
position: relative;
left: 100px;
}
body
{
background-color: #E1E7E8;
}
<h2>Translation on click by using jQuery</h2>
<div id="box-one"></div>
<button id="button-one">translate</button>
<hr/>
<h2>Smooth translation on click by using jQuery</h2>
<div id="box-two"></div>
<button id="button-two">translate</button>
<br/>
<button id="button-three">reset</button>