自动添加指向JavaScript中文件夹中文件的链接 [英] Automatically adding links to files in a folder in JavaScript
问题描述
如果可能的话，有人可以帮我这个忙吗?我以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="<iframe scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowtransparency="true" width:640px; height:460px;" allowfullscreen="" src="https://www.youtube.com/embed/[ytvidID]"></iframe>" onfocus="this.select();" onclick="this.select()">
<iframe scrolling="no" frameborder="0" marginheight="0" marginwidth="0" allowtransparency="true" width:640px; height:460px;" allowfullscreen="" src="https://www.youtube.com/embed/[ytvidID]"></iframe>
</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!
这篇关于自动添加指向JavaScript中文件夹中文件的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
