Question

如果有可能，有人可以帮助我。我以YouTube为例。正如您在此PLNKR链接中看到的那样：http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=preview

例如embed是我的文件夹，在该文件夹中我有名为p9zdCra9gCE和QrMOu4GU3uU的文件，正如您在此处看到的那样：

<div class="ytid" data-str="p9zdCra9gCE">video 1</div>
<div class="ytid" data-str="QrMOu4GU3uU">video 2</div>

如果有可能我想要它，以便每当我在p9zdCra9gCE.html文件夹中添加QrMOu4GU3uU.html或embed等文件时，它将自动添加到其他视频旁边的索引页面上按钮变成这样：

<div class="ytid" data-str="p9zdCra9gCE">video 1</div>
<div class="ytid" data-str="QrMOu4GU3uU">video 2</div>
<div class="ytid" data-str="AnotherFile">video 3</div>
<div class="ytid" data-str="AnotherFile">video 4</div>
<div class="ytid" data-str="AnotherFile">video 5</div>

我该怎么做？

Answer 1

为了帮助你“一点点”，我建议你这样做：
1.使用php或其他SERVER SIDE语言。如评论中所述，您将无法使用javascript或jquery访问服务器上的文件系统 2.使用例如scandir（）方法（即php）来获取文件夹的内容。见http://php.net/manual/en/function.scandir.php
3.这将在扫描的目录中返回一组文件和文件夹。使用foreach循环生成ytid div。

如果您不知道这意味着什么我建议遵循关于codecademy或其他在线资源的php教程。祝你好运！

Answer 2

<html>
<head>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/264659524/Files/myjs.js"></script>
<style>
.ytid{float:left;margin-right:5px;border:1px solid black}
.clear{clear:both;}
</style>
</head>

<body>

<div class="listids">
    <div class="ytid" data-str="p9zdCra9gCE">video 1</div>
    <div class="ytid" data-str="QrMOu4GU3uU">video 2</div>
 </div>


 <div class="clear"></div>
<br>

<div class="vidarea">
            <div class="load_vid"></div>
        <iframe class="vid_src" data-src="" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="width:640px; height:460px;display:none;" allowfullscreen=""></iframe>
            </div>

<br><br><br><br><br><br><br><br><br><br>

<textarea class="embed" data-content="&lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;" onfocus="this.select();" onclick="this.select()">
    &lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; allowtransparency=&quot;true&quot; width:640px; height:460px;&quot; allowfullscreen=&quot;&quot; src=&quot;https://www.youtube.com/embed/[ytvidID]&quot;&gt;&lt;/iframe&gt;

</textarea>

<script>
    $(document).ready(function(e) {
        $(".vid_src").attr("data-src", "https://www.youtube.com/embed/p9zdCra9gCE");
        var t = "1";
        var n = $(".embed").attr("data-content");
        n = n.replace("[ytvidID]", t);
        $(".embed").html(n);
        $(".listids").slideDown();

        bindEventHandlers();


        $(".embed").keyup(function()
        {
            var valuetoinspect = $(this).val();
            if(valuetoinspect.indexOf(".html") != -1)
            {
                var vidvalue = valuetoinspect.split(".html");
                checkAndMergeVideoListing(vidvalue[0]);
            }
        })
    })

    function checkAndMergeVideoListing(video)
    {
        var count = $(".ytid").length;

        if( $(".ytid[data-str=\""+video+"\"]").attr("data-str") == null)
        {
            var $div = $("<div></div>");
            $div.addClass("ytid");
            $div.attr("data-str",video);
            $div.html("video " + (count+1));

            $(".listids").append($div);

            bindEventHandlers();

            $(".ytid[data-str=\""+video+"\"]").click();
        }
    }

    function bindEventHandlers()
    {
        $(".ytid").unbind("click").click(function(e) {
            var t = $(this).attr("data-str");
            var n = "https://www.youtube.com/embed/" + t + "";
            var r = $(".embed").attr("data-content");
            r = r.replace("[ytvidID]", t);
            $(".embed").html(r);
            $(".vid_src").attr("src", n);
            clearInterval(interval);
            document.querySelector(".load_vid").style.display = "none";
            $(".vid_src").show();
            return
        })
    }
</script>

</body>
</html>

请检查here进行演示，假设在embed textarea中输入类似p9zdCra9gCE.html的内容。它会添加到视频选项卡中[同样开始播放]。如果我无法理解你的要求，请告诉我。希望它有所帮助！

在JavaScript中自动添加指向文件夹中文件的链接

2 个答案: