javascript - 一个函数与另一个 javascript 交互

Question

我有 2 个可以完美运行的函数。我想让他们一起工作。其中之一是 slider 。请参阅下面的代码。

        <script>
        $(function(){
            $(".cloudslider-handle").slider({
                range:"min",
                value:1,
                min:1,
                max:10,
                slide:function(event,ui){
                    $(".a,.b,.c,.d").width(ui.value * 10+"%");
                }
            });
            $(".ui-slider-handle").text("<>");
            $(".a,.b,.c,.d").width(10+"%");

        });
    </script>

另一个是车速表。请参阅下面的代码

        <script>

        document.addEventListener("DOMContentLoaded", function(event) {
            var gg1 = new JustGage({
                id: "gg1",
                formatNumber: true,
                counter: true
            });
        });

    </script>

如何编写代码，以便当我将 slider 滑动到某个值(例如 2)时，该值将传递给速度计？

Answer 1

你可以看下面的代码。也许这会对您有所帮助:

请查看为 slider 添加的 change: function( event, ui ) 事件处理程序。它从 slider 获取更新的值，并通过调用 gg1.refresh(newValue);

刷新 JustGage

<script type="text/javascript">
    $(function(){

       var gg1 = new JustGage({
            id: "gg1",
            formatNumber: true,
            counter: true
        });

        $(".cloudslider-handle").slider({
            range:"min",
            value:1,
            min:1,
            max:10,
            slide:function(event,ui){
                $(".a,.b,.c,.d").width(ui.value * 10+"%");
            },

            change: function( event, ui ) {
                var newValue = ui.value * 10;
                gg1.refresh(newValue);
            }
        });
        $(".ui-slider-handle").text("<>");
        $(".a,.b,.c,.d").width(10+"%");

    });

</script>