在创建自定义查找栏时，在单击外部div时更改内部div的宽度。
在创建自定义查找栏时，在单击外部div时更改内部div的宽度。
提问于 2017-02-01 06:57:36
我为一个音频播放器制作了一个自定义查找条，使用两个div内部的一个。它在播放歌曲时运行良好，但当用户单击外部div (查找条)时，我希望更改内部div的宽度，并更改音频时间。
这是我的密码
<div id="progress">
<div id="myBar"></div>
#Progress
{
position: relative;
height:6px;
width: 100%;
height: 30px;
margin-top: 25px;
background-color: grey;
}
#myBar
{
position: absolute;
width: 0%;
height: 100%;
background-color: green;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-01 07:18:48
你可以用这个：
$(document).ready(function() {
$("#progress").click(function(e){
var xDistance = e.pageX - this.offsetLeft;
var yDistance = e.pageY - this.offsetTop;
$("#myBar").width(xDistance);
});
});#progress {
position: relative;
height:6px;
width: 100%;
height: 30px;
margin-top: 25px;
background-color: grey;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="progress">
<div id="myBar"></div>
</div>
Stack Overflow用户
发布于 2017-02-01 08:36:10
你一定做错什么了。以下是完整的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#progress").click(function(e){
var xDistance = e.pageX - this.offsetLeft;
var yDistance = e.pageY - this.offsetTop;
$("#myBar").width(xDistance);
console.log(xDistance);
});
});
</script>
<style type="text/css">
#progress {
position: relative;
height:6px;
width: 100%;
height: 30px;
margin-top: 25px;
background-color: grey;
}
#myBar {
position: absolute;
width: 0%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div id="progress">
<div id="myBar"></div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41973709
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号