Question

我在另一个内部使用两个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;
}

Answer 1

您可以使用：

＆＃13;

$(document).ready(function() {
        $("#progress").click(function(e){
		    var xDistance = e.pageX - this.offsetLeft;
		    var yDistance = e.pageY - this.offsetTop;
		    $("#myBar").width(xDistance);
		});
});

＆＃13;

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="progress">
	<div id="myBar"></div>
</div>

＆＃13;

Answer 2

你一定做错了。这是完整的代码：

<!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>

在创建自定义搜索栏时，在单击外部div时更改内部div的宽度

2 个答案: