我怎樣才能使這個 Javascript 代碼更有效率？
[英]How can I make this Javascript code more efficient?
問題描述
一切都如我所願，但我覺得我是多余的。 我還有 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>
2 個解決方案
解決方案1
0 2019-03-06 15:56:37
將 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>
解決方案2
0 2019-03-06 16:13:41
嘗試使用 dom 而不是內聯的點擊事件
- 每次點擊 .Get 被點擊的輸入 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>
我可以使用JavaScript編寫更有效的代碼嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.