时间戳

首页 > 解决方案 > 如何在按钮单击时调用具有相同变量的函数？[解决了]

javascript - 如何在按钮单击时调用具有相同变量的函数？[解决了]

问题描述

在 HTML 中，我创建了 4 个按钮。一个使视频速度变慢（x0.5），另一个使其处于正常速度（x1.0），另一个使其速度更快（x2.0），最后一个使其速度非常快速（x8.0）。我正确地制作了按钮，并且一切都按其应有的方式工作，但问题是当我尝试将这些按钮应用于另一个视频时，这些按钮只能在第二个视频上工作，而不对第一个视频做任何事情。当我删除第二个视频时，按钮将在第一个视频上恢复正常工作。我检查了控制台，没有发现任何错误。

我的 HTML 代码

                <h3>First video</h3>
                <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                </div>
                <h3>Second video</h3>
                <video id="vsec" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs2()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn2()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf2()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf2()" type="button">×8.0</button>
                </div>
                
                            <script>
                var vid = document.getElementById("vfirst");
                    function Bs() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn() {
                        vid.playbackRate = 1;
                    }
                    function Bf() {
                        vid.playbackRate = 2;
                    }
                    function Bvf() {
                        vid.playbackRate = 8;
                    }
                var vid = document.getElementById("vsec");
                    function Bs2() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn2() {
                        vid.playbackRate = 1;
                    }
                    function Bf2() {
                        vid.playbackRate = 2;
                    }
                    function Bvf2() {
                        vid.playbackRate = 8;
                    }
            </script>

这是相同的代码，但第二个视频被删除了。看看它是如何工作的非常好。

                    <h3>First video</h3>
                    <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                    <p>Video speed</p>
                    <div class="sps">
                        <button class="bs" onclick="Bs()" type="button">×0.5</button>
                        <button class="bn" onclick="Bn()" type="button">×1.0</button>
                        <button class="bf" onclick="Bf()" type="button">×2.0</button>
                        <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                    </div>
                    
                                <script>
                    var vid = document.getElementById("vfirst");
                        function Bs() {
                            vid.playbackRate = 0.5;
                        }
                        function Bn() {
                            vid.playbackRate = 1;
                        }
                        function Bf() {
                            vid.playbackRate = 2;
                        }
                        function Bvf() {
                            vid.playbackRate = 8;
                        }
                </script>

有任何想法吗？

标签： javascripthtmljquery

解决方案

您需要将变量名称 vid更改为第一个视频的vid1和第二个视频的vid2。在标签中使用以下代码。

var vid1 = document.getElementById("vfirst");
function Bs() {
    vid1.playbackRate = 0.5;
}
function Bn() {
    vid1.playbackRate = 1;
}
function Bf() {
    vid1.playbackRate = 2;
}
function Bvf() {
    vid1.playbackRate = 8;
}
var vid2 = document.getElementById("vsec");
function Bs2() {
    vid2.playbackRate = 0.5;
}
function Bn2() {
    vid2.playbackRate = 1;
}
function Bf2() {
    vid2.playbackRate = 2;
}
function Bvf2() {
    vid2.playbackRate = 8;
}

推荐阅读