Question

一切正常，但我感到自己很多余。我还有100多个视频要上传，并且觉得有比继续制作函数更好的方法：ninetyNine（），oneHundred（）。

JavaScript

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

HTML

curl -X PUT "http://127.0.0.1:9200/test2" -d "{ \"mappings\": { \"_doc\": { \"properties\": { \"user\" : { \"type\": \"keyword\" } } } } }"

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

Answer 2

尝试使用dom而不是嵌入式的click事件

每次单击。获取单击的输入符号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代码更有效？

2 个答案: