jquery - Automatically adding links to files in a folder in JavaScript

Question

Welcome To Ask or Share your Answers For Others

jquery - Automatically adding links to files in a folder in JavaScript

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

jquery - Automatically adding links to files in a folder in JavaScript

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

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>

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>

How can I do that?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:26:38+0000

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

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!

Categories

jquery - Automatically adding links to files in a folder in JavaScript

jquery - Automatically adding links to files in a folder in JavaScript

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags