Jquery 创建自定义seekbar时，单击外部div可更改内部div的宽度_Jquery_Html_Css

Jquery 创建自定义seekbar时，单击外部div可更改内部div的宽度

jquery html css

Jquery 创建自定义seekbar时，单击外部div可更改内部div的宽度,jquery,html,css,Jquery,Html,Css,我使用两个div制作了一个定制的seekbar，一个在另一个里面，用于音频播放器。它在播放歌曲时工作得很好，但我想在用户单击外部div seekbar时更改内部div的宽度，并更改音频的时间这是我的密码 <div id="progress"> <div id="myBar"></div> 您可以使用以下选项： $document.readyfunction{ $progress.clickfunction{ var xDistance=e.pageX-t

我使用两个div制作了一个定制的seekbar，一个在另一个里面，用于音频播放器。它在播放歌曲时工作得很好，但我想在用户单击外部div seekbar时更改内部div的宽度，并更改音频的时间

这是我的密码

<div id="progress">
<div id="myBar"></div>

您可以使用以下选项：

$document.readyfunction{ $progress.clickfunction{ var xDistance=e.pageX-this.offsetLeft； var yDistance=e.pageY-this.offsetTop； $myBar.widthxDistance； }; }; 进展{ 位置：相对位置；高度：6px；宽度：100%；高度：30px；边缘顶部：25px；背景颜色：灰色； } 我的酒吧{ 位置：绝对位置；宽度：0%；身高：100%；背景颜色：绿色； }

你一定做错了什么。以下是完整的代码：

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

但是如何找到用户单击的宽度我已经更新了jQuery代码，以基于鼠标单击计算宽度。你可以检查一下。我使用了这个更新的代码。但它不起作用。我想增加我的点击栏的宽度。但它不是这样工作的。我想为音频定制一个seekbar。我已经做过了。单击RunCodeSnippet。您可以看到子div的宽度，即myBar采用用户单击的宽度。如果你需要完整的HTML，那么它在这里的第二个答案。是的，你是绝对正确的。但它不适合我可能是因为我使用了动态ID

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