您的位置: 首页  >  技术问答  >  自动添加指向JavaScript中文件夹中文件的链接

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

分类: 技术问答 • 2022-07-23 10:33:55
问题描述：

如果可能的话，有人可以帮我这个忙吗?我以YouTube为例.如您在此PLNKR链接中所看到的: http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=preview

If it's possible, can some one please help me with this. I made YouTube for example. As you see in this PLNKR LINK: http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=preview

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

For example embed is my folder and in that folder I have files named p9zdCra9gCE and QrMOu4GU3uU, as you see them in here:

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

如果可能的话，只要我在embed文件夹中添加p9zdCra9gCE.html或QrMOu4GU3uU.html之类的文件，它就会自动添加到索引页面上的其他视频按钮旁边，如下所示:

If it's possible I want it so that whenever I add a file like, p9zdCra9gCE.html or QrMOu4GU3uU.html in the embed folder it will be automatically added on the index page next to other video buttons to become like this:

<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>

我该怎么做?

答 

<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>

请检查此处以进行演示，假设在嵌入的文本区域中输入的内容类似于p9zdCra9gCE .html.它被添加到视频"标签中(开始播放).如果我无法掌握您的要求，请告诉我.希望对您有帮助！

Please check here for demo, assuming in the embed textarea you enter something like p9zdCra9gCE.html. It gets added in the video tab [the same starts playing]. Please let me know if i was not able to grasp your requirement. Hope it helps!

相关推荐