javascript - 使用文本移动框的按钮 - JavaScript Jquery
问题描述
我必须使第一个名为“натисни”的按钮在我单击按钮时使框“кутийка с текст”向右移动 10 像素。有什么建议么 ?
这是代码。
// 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>
解决方案
- 给 div 一个 ID - 我用
move
- 添加 CSS
#move { position:relative}
- 你不能移动,除非它是绝对位置或相对位置 - 添加脚本 - (但没有 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>
推荐阅读
- authentication - 在tomcat自定义JNDIRealm中访问会话信息
- laravel - 如何在 Laravel Mail 上默认设置 CC/BCC
- convox - Convox Gen3 不能使用通配符子域?
- javascript - 在元素上选择 e.target.value ?
- mysql - 插件“InnoDB”初始化函数返回错误
- react-native - React-native:Android 11蓝牙权限未显示在设置>应用程序> myapp>权限中
- php - 如何在 Php Curl GET 请求中传递数组 -Laravel?
- angular - 使用 pixi.js 6.1.3 构建 angular 9 Universal
- regex - 正则表达式:使用正则表达式验证域名
- reactjs - 更改箭头函数以全局使用 var