Кнопка, перемещающая поле с текстом - JavaScript Jquery - PullRequest
Новая
       1

Кнопка, перемещающая поле с текстом - JavaScript Jquery

0 голосов
/ 29 мая 2020

Я должен сделать эту первую кнопку под названием «натисни», чтобы поле «кутийка с текст» переместилось вправо на 10 пикселей, когда я нажимаю кнопку. Какие-либо предложения ?

Вот код.

http://jsfiddle.net/08y7rqf5/

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  <script>
    $("button").click(function() {
      $("div").animate({
        left: '250px'
      });
    });
  </script>
</head>
 
<body>
  <!-- задача 1 -->
  <div class="container my-5">
    <div class="row">
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">
            <div class="d-inline-block border p-2 bg-primary text-white" data-margin="10">кутийка с текст</div>
            <input type="button" class="btn btn-info float-right" value="Натисни">
          </li>
        </ul>
      </div>
    </div>
  </div>
 </body>
</html>

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

где ваше баннер-сообщение id в вашем html коде ??? И вы используете ввод с кнопкой типа, а не с тегом кнопки, поэтому вы не можете использовать 

var button = $("button")

Вам нужно использовать 

var button = $("input[type=button]")

Но лучший способ определить класс для него. Пример: 

<input type="button" class="btn btn-info float-right myButtonClass" value="Натисни">

, а затем назовите его как 

var button = $(".myButtonClass");
0 голосов
/ 29 мая 2020
  1. присвоить div идентификатор - я использую move
  2. Добавить CSS #move { position:relative} - вы не можете перемещаться, если это положение не является абсолютным или относительным
  3. Добавьте скрипт - (но у него нет onclick или аналогичного) 

$(function() {
  $('[value="Натисни"]').on("click",function() { 
    const div = $(this).prev(); // or $("#move")
    let pos = Math.round(div.position().left)
    div.css({"left":(pos+10)+"px"}); // or $("#move").css(....)
  })
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

#move { position:relative}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 

  </script>
</head>
<body>
  <!-- задача 1 -->
  <div class="container my-5">
    <div class="row">
      <div class="col-12">
        <ul class="list-group">
          <li class="list-group-item">
            <div id="move" class="d-inline-block border p-2 bg-primary text-white" data-margin="10">кутийка с текст</div>
            <input type="button" class="btn btn-info float-right" value="Натисни">
          </li>
        </ul>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...