如何使这段 Javascript 代码更高效？答案

【问题标题】：How can I make this Javascript code more efficient?如何使这段 Javascript 代码更高效？
【发布时间】：2019-07-28 08:30:23
【问题描述】：

一切都如我所愿，但我觉得我是多余的。我还有 100 个视频要上传，感觉有比继续制作函数更好的方法：ninetyNine()、oneHundred()。

Javascript

<script> 
function first(){
    $('#videoObj').remove();
    $('<iframe id="videoObj"  width="1280 " height="720" src="http://www.mysiteetisym.com/videos/KidsOnTrampoline.mp4"  frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
}
function second(){
    $('#videoObj').remove();
    $('<iframe id="videoObj" width="1280" height="720" src="http://www.mysiteetisym.com/videos/WaterFight.mp4" frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
}

function third(){
    $('#videoObj').remove();
    $('<iframe id="videoObj" width="1280 " height="720" src="http://www.mysiteetisym.com/videos/FourWheelingRace.mp4" frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
}

function fourth(){
    $('#videoObj').remove();
    $('<iframe id="videoObj"  width="1280 " height="720" src="http://www.mysiteetisym.com/videos/CookingWithDebbie.mp4"  frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
}
</script>

HTML

<body>
<div>
  <input class="videoBtns" id="firstVideo" type="image" src="images/KidsOnTrampoline.jpg" onClick="first()" />
  <input class="videoBtns" id="secondVideo" type="image" src="images/WaterFight.jpg" onClick="second()" />
  <input class="videoBtns" id="thirdVideo" type="image" src="images/FourWheelingRace.jpg" onClick="third()" />
  <input class="videoBtns" id="fourthVideo" type="image" src="images/CookingWithDebbie.jpg "onClick="fourth()" />
</div>

<div id="vholder"></div>

</body>

【问题讨论】：

接受视频名称参数的单个函数怎么样？
@Pointy - 这是我的目标，将所有内容都变成一个函数。我目前正在学习 JSON 文件，从它们加载数据似乎很有效。我只是一个反复试验的人，已经达到了我的最终错误。
@Marcus，你不需要 JSON，看看给出的答案
@iArcadia - 我知道不需要 JSON。我正在学习它，因为每个视频都有很多属性。姓名、地点、人物、时间、日期等。我的最终目标是点击视频的.jpg，以及视频下的所有元数据列表。
没问题，我误解了你的评论

标签： javascript jquery html json

【解决方案1】：

将 src 作为参数传递并在函数中将其附加到 iframe。只调用一个函数

function f(e){
    $('#videoObj').remove();
    $('<iframe id="videoObj"  width="1280 " height="720" src=http://www.mysiteetisym.com/videos/'+e+'.mp4  frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
  <input class="videoBtns" id="firstVideo" type="image" src="images/KidsOnTrampoline.jpg" onClick="f('KidsOnTrampoline')" />
  <input class="videoBtns" id="secondVideo" type="image" src="images/WaterFight.jpg" onClick="f('WaterFight')" />
  <input class="videoBtns" id="thirdVideo" type="image" src="images/FourWheelingRace.jpg" onClick="f('FourWheelingRace')" />
  <input class="videoBtns" id="fourthVideo" type="image" src="images/CookingWithDebbie.jpg "onClick="f('CookingWithDebbie')" />
</div>

<div id="vholder"></div>

</body>

【讨论】：

虽然变化不大，但您可以简单地进一步看到所有视频的大部分 URL 都是相同的。
@k97513 - 它有效，谢谢！有没有其他方法可以使输入按钮更有效？我遇到了为每个视频编写 100 行代码的相同问题。

【解决方案2】：

尝试使用 dom 而不是内联的点击事件

每次点击.获取点击的输入elem src
然后使用正则表达式匹配准确的结果
然后使用 iframe 源传递

$(document).on('click','.videoBtns',function(){
   $('#videoObj').remove();
   var vid = $(this).attr('src').toString().match(/\/(.*)\./g)[0];
   console.log("http://www.mysiteetisym.com/videos"+vid+
"mp4")
    $('<iframe id="videoObj"  width="1280 " height="720" src="http://www.mysiteetisym.com/videos'+vid+'mp4"  frameborder="0" allowfullscreen></iframe>').prependTo('#vholder');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="videoBtns" id="firstVideo" type="image" src="images/KidsOnTrampoline.jpg"  />
  <input class="videoBtns" id="secondVideo" type="image" src="images/WaterFight.jpg" />
  <input class="videoBtns" id="thirdVideo" type="image" src="images/FourWheelingRace.jpg"  />
  <input class="videoBtns" id="fourthVideo" type="image" src="images/CookingWithDebbie.jpg " />
</div>

<div id="vholder"></div>

【讨论】：