当我单击按钮时，我必须使名为“натисни”的第一个按钮使“кутийкастекст”框向右移动10px。有什么建议么 ？这是代码。
// 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>move#move { position:relative}-您不能移动，除非它是绝对位置或相对位置$(function() {
$('[value="Натисни"]').on("click",function() { // or $("#move").next().on("click",....
$(this).prev().css({"left":"+10px"}); // 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>
您的banner-message ID在您的html代码中在哪里？而且您正在使用带有类型按钮的输入，而不是按钮标签，因此您无法使用
var button = $("button")
您需要使用
var button = $("input[type=button]")
但是最好的方法是为其定义类。例子
<input type="button" class="btn btn-info float-right myButtonClass" value="Натисни">
然后称其为
var button = $(".myButtonClass");