Как я могу сделать этот код Javascript более эффективным?

Все работает так, как я хочу, но я чувствую себя лишним. Мне нужно загрузить еще 100 видео, и я чувствую, что есть лучший способ, чем продолжать создавать функции: девяностодевять(), однасотня().

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>

Как насчет одной функции, которая принимает параметр имени видео?

— 06.03.2019 16:51

@Pointy - это моя цель - превратить все в одну функцию. В данный момент я изучаю файлы JSON, и мне кажется, что загружать данные из них эффективно. Я просто человек проб и ошибок, который достиг своей последней ошибки.

— 06.03.2019 16:56

@Маркус, для этого тебе не нужен JSON, посмотри на данные ответы

— 06.03.2019 16:57

@iArcadia - я знаю, что JSON не нужен. Я изучаю это, потому что у меня есть много атрибутов с каждым видео. Имя, местоположение, люди, время, дата и т. д. Моя конечная цель — щелкнуть .jpg видео и весь этот список метаданных под видео.

— 06.03.2019 17:06

Нет проблем, я неправильно понял ваш комментарий

— 06.03.2019 17:07

javascript jquery html json

06.03.2019 16:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Передайте 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-адреса одинакова для всех видео.

— 06.03.2019 16:58

@ k97513 - Работает, спасибо! Есть ли другой способ сделать кнопки ввода более эффективными? Я сталкиваюсь с той же проблемой написания 100 строк кода для каждого видео.

— 06.03.2019 17:14

06.03.2019 16:56

Попробуйте использовать событие click с dom вместо встроенного

Каждый раз нажимайте .Get щелкнутый входной элемент src
Затем сопоставьте точный результат, используя регулярное выражение
Затем перейдите с источником iframe

$(document).on('click','.videoBtns',function(){
   $('#videoObj').remove();
   var vid = $(this).attr('src').toString().match(//(.*)\./g)[0];
   console.info("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>

06.03.2019 17:13

Другие вопросы по теме

Проверять contenteditable при вводе, а не при нажатии

Обновить статус до одобренного через AJAX при нажатии кнопки

Таблицы данных jQuery не показывают заголовки

Пользовательский HTML-пейджинг Slick Slider

Доступ к массиву в 3-м измерении с помощью Javascript

URL-адрес на основе значения текстового поля — многострочный

Https заменены на http в React JQuery

Выделите текущее меню с помощью AngularJS

Как сдвинуть вверх, чтобы скрыть и показать div с помощью jQuery?

Подсветка с помощью mark.js работает только для 1-3 букв

Как я могу сделать этот код Javascript более эффективным?

Ответы 2

Другие вопросы по теме

Похожие вопросы