Question

我正在尝试使用 jquery 构建一个函数，但我不能。我正在尝试使用为不同选项卡设置的一个按钮来控制视频和音频。问题是播放暂停按钮只控制音频文件而不是第二个标签中的视频文件。

当我们转到第二个选项卡并按下下方的按钮时，它会播放相同的音频文件。

在此处查看示例代码

        $(document).ready(function () {
            $("#audio_play").on("click", function () {
                $("#audio").get(0).play();
            })
            $("#audio_pause").on("click", function () {
                $("#audio").get(0).pause();
            })
            $('.menu ul li:nth(1)').on("click", function () {

                $("#audio_play").attr('id', 'video_play');
                $("#audio_pause").attr('id', 'video_pause');

            })
            $("#video_play").on("click", function () {
                $("#video").get(0).play();
            })
            $("#video_pause").on("click", function () {
                $("#video").get(0).pause();
            })
        })

.con{
 text-align:center;
 width:156px;
 margin:0 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.2/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex justify-center items-center w-full h-screen inset-x-0 mx-auto">
        <!--actual component start-->
        <div class="menu" x-data="setup()">
            <ul class="flex justify-center items-center my-4">
                <template x-for="(tab, index) in tabs" :key="index">
                    <li class="cursor-pointer py-2 px-4 text-gray-500 border-b-8"
                        :class="activeTab===index ? 'text-green-500 border-green-500' : ''" @click="activeTab = index"
                        x-text="tab"></li>
                </template>
            </ul>

            <div class="w-full bg-white p-16 text-center mx-auto border">
                <div x-show="activeTab===0">
                <h1>Audio Player</h1>
                    <audio id="audio"
                        src="https://res.cloudinary.com/foxyplays989/video/upload/v1558369838/LetsGo.mp3"></audio>
                </div>
                <div x-show="activeTab===1">
                <iframe id="video" class="w-full h-56"
                                            src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
                                            allowfullscreen allowtransparency allow="autoplay"></iframe>
                </div>
                <div x-show="activeTab===2">Content 3</div>
                <div x-show="activeTab===3">Content 4</div>
            </div>
        </div>
        <!--actual component end-->
    </div>
        <div class="flex con">
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none" id="audio_play">play</button>
            <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none" id="audio_pause">Pause</button>
        </div>
    <script>
        function setup() {
            return {
                activeTab: 0,
                tabs: [
                    "Tab No.1",
                    "Tab No.2",
                ]
            };
        };
    </script>

播放暂停按钮在选项卡到选项卡上不起作用

0 个答案: