我必须让这个第一个按钮叫做 "натисни"，使 "кутийка с текст "框在我点击按钮时向右移动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>
</body>
</html>move#move { position:relative} - 不进则退$(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>你的 横幅信息 在你的html代码中，你使用的是type button的输入，而不是button标签，所以你不能使用
var button = $("button")
您需要使用
var button = $("input[type=button]")
但最好的方法是为它定义一个类。例子
<input type="button" class="btn btn-info float-right myButtonClass" value="Натисни">
进而称其为
var button = $(".myButtonClass");