Как переместить квадрат с помощью jQuery? Пользователь вводит пиксели - PullRequest
Новая
       8

Как переместить квадрат с помощью jQuery? Пользователь вводит пиксели

1 голос
/ 13 января 2020

Я написал код для перемещения квадрата в jQuery (например, 50px). Теперь мне нужно, чтобы пользователь ввел пиксели (в текстовое поле), которые будут определять, сколько будет квадрат go вверх, вниз, влево или вправо. Вот часть кода, который я написал: 

$(document).ready(function(){
 $("#down").click(function(){
    $("div").animate({
        marginTop:"100px"
    }, "slow");
});

Мне нужно, чтобы значение marginTop было гибким. Пожалуйста помоги. Спасибо!

1 Ответ

1 голос
/ 13 января 2020

Код можно написать лучше .. Я оставлю это вам:) 

$(document).ready(function() {
  $("#uparr").click(function() {
    $("div").animate({
      marginTop: (parseInt($("div").css("marginTop")) - parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#downarr").click(function() {
    $("div").animate({
      marginTop: (parseInt($("div").css("marginTop")) + parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#leftarr").click(function() {
    $("div").animate({
      marginLeft: (parseInt($("div").css("marginLeft")) - parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
  
  $("#rightarr").click(function() {
    $("div").animate({
      marginLeft: (parseInt($("div").css("marginLeft")) + parseInt($("#marginTop").val())) + 'px'
    }, "slow");
  });
});
#down {
  background-color: red;
  width: 50px;
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='marginTop' value='100' onchange='$("#down").click'/>
<button id='uparr'>Move up</button>
<button id='downarr'>Move down</button>
<button id='leftarr'>Move left</button>
<button id='rightarr'>Move right</button>
<div id='down'></div>
...