如果单击,我想移动框

时间:2019-06-04 07:27:51

标签: javascript css

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

6 个答案:

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