Question

我正在尝试根据我在某个细分受众群中点击的位置来更新进度条的状态。

我有一个函数可以返回段内点击的标准化相对位置（参见下面的getMousePos），我认为通过查看控制台输出它可以正常工作。

目前进度条根本没有变化，我不明白为什么。我在控制台中看不到任何错误，负责正确执行更新的回调会使用console.log输出点击的位置。

这是我能想到的最小的例子，它重现了这个错误：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
</head>

<body>

    <div id="foo:s" class="ui segment" style="height:300px">
    </div>
    <div id="foo:p" class="ui progress">
        <div class="bar"></div>
    </div>

    <script type="text/javascript">
        /**
         * Returns normalised x and y position (between 0 and 1) of mouse pointer, 
         * relative to top-left corner of input DOM element.
         */
        function getMousePos(elm, evt) {
            var rect = elm.getBoundingClientRect();
            return {
                x: (evt.clientX - rect.left) / (rect.right - rect.left),
                y: (evt.clientY - rect.top) / (rect.bottom - rect.top)
            };
        }

        // Initialise progressbar
        $('#foo:p').progress();

        // Bind click events to progress bar state
        document
            .getElementById('foo:s')
            .addEventListener("click", function(evt) {

                var pos = getMousePos(this, evt);
                console.log(pos);

                $('#foo:p').progress({
                    percent: Math.floor(100 * pos.x)
                });

            });
    </script>

</body>

</html>

您可以在CodePen上看到它正在运行。

Answer 1

<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
</head>

<body>

    <div id="foo_s" class="ui segment" style="height:300px">
    </div>
    <div id="foo_p" class="ui progress">
        <div class="bar"></div>
    </div>

    <script type="text/javascript">
        /**
         * Returns normalised x and y position (between 0 and 1) of mouse pointer, 
         * relative to top-left corner of input DOM element.
         */
        function getMousePos(elm, evt) {
            var rect = elm.getBoundingClientRect();
            return {
                x: (evt.clientX - rect.left) / (rect.right - rect.left),
                y: (evt.clientY - rect.top) / (rect.bottom - rect.top)
            };
        }

        // Initialise progressbar
        $('#foo_p').progress();

        // Bind click events to progress bar state
        document
            .getElementById('foo_s')
            .addEventListener("click", function(evt) {

                var pos = getMousePos(this, evt);
                console.log(pos);

                $('#foo_p').progress({
                    percent: Math.floor(100 * pos.x)
                });

            });
    </script>

</body>

</html>

进度条是一个jquery-ui元素，所以你需要包含对它的支持。

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

为了让它在您的codepen中运行，我还必须使用'foo _'重命名您的'foo：'名称。

我不知道IDS中的冒号是否是有效的HTML。

根据段事件更新进度条

1 个答案: