获取变量到 url 并导航选择的变量

Question

谁能帮我写代码

我的页面是关于切换 iframe 的

当我点击视频 1 时，它有 data-str="p9zdCra9gCE"

它只会改变 class="load_video" 中 iframe 的 src 的结尾

所以我需要像这样... 当我点击视频 1 或视频 2 时，我应该在 url 上获得“p9zdCra9gCE”，使其类似于 page.php?p9zdCra9gCE

所以当有人导航到 page.php?p9zdCra9gCE 或 page.php?0_MfMUN_FNM 那么 data-str 应该在 iframe 上，而不是通过单击视频按钮进行切换。希望你们能理解，到目前为止，没有人帮助过我。

这是我在 plnkr http://plnkr.co/edit/IPY3GF7Poyv1URrk84FH?p=preview 上的完整代码

这是我的 php 代码

<?php

        $id = 1;
        foreach (glob('directory/*.php') as $file) {
            $file = str_replace('directory/', '', $file);
            $file = str_replace('.php', '', $file); ?>
            <div style="display:block;" class="video_link" data-str="<?php echo $file; ?>">Video <?php echo $id++ ?></div>
        <?php }

        ?>

这是我的 javascript 代码

<script>
    $(document).ready(function() {
        $(".frame_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
        var t = "p9zdCra9gCE",
            e = $(".embed_code").attr("data-content");
        e = e.replace("[videoID]", t), $(".embed_code").html(e), $(".video_button").slideDown(), $(".video_link").click(function() {
            $(".reloadframe").show();
            var t = $(this).attr("data-str"),
                e = "https://www.youtube.com/embed/" + t + "",
                a = $(".embed_code").attr("data-content");
            a = a.replace("[videoID]", t), $(".embed_code").html(a), $(".frame_src").attr("src", e), clearInterval(interval), document.querySelector(".load_video").style.display = "none", $(".frame_src").show()
        })
    });
            </script>

Answer 1

查看 jQuery 的 .click() 或 .on() 方法文档。您希望使用阻止默认点击操作（在这种情况下，您将阻止链接导航到新页面）并将其替换为使用所述链接更新 iframe。代码将如下所示：

$(document).ready(function() {
    //bind listener to elements the are used to update the iframe
    $('.updateFrame').on('click', function(e) {
        e.preventDefault(); //stop normal click event
        $('.videoFrame').attr('src', $(this).data('src')); //update iframe src
    });
});