Question

这是一个简单的问题。如果我点击该框，我想向左移动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");
  }

Answer 1

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>

Answer 2

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>

Answer 3

您将其向左移动的css属性不正确。应该是

.playing {
transform: translateX(200px);
}

Answer 4

您也可以使用它。代替使用 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>

Answer 5

由于此问题已经解决，但我只是在尝试是否有人要通过单击框连续移动框，那么此代码将很有帮助。

<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>

Answer 6

$(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>

如果单击，我想移动框

6 个答案: