Блог

Итак, у меня есть пять разных контейнеров div и один iframe. Мне нужно изменить src iframe в зависимости от того, какой div я нажимаю. Это ссылки на YouTube, поэтому каждый раз, когда я нажимаю на определенный div, iframe src должен изменяться. Дивы, нажав на которые следует изменить iframe:

Фрейм:

Html-код iframe:

 <div class="full">
                <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
            </div>
 

Я нашел какое-то решение, но оно, похоже, не работает:

 var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA", 
                    "https://www.youtube.com/embed/c7nRTF2SowQ", 
                    "https://www.youtube.com/embed/6LOD-pwJY6E",
                    "https://www.youtube.com/embed/8X2kIfS6fb8", 
                    "https://www.youtube.com/embed/p5yUKjOOWvM"
                ];
      var currentIndex = 0;
      var len = locations.length;
      $(document).ready(function(){
        $(document).on('click', '.preview', function(){
            currentIndex = this.attr("id") == "1" ? 
            currentIndex < len - 1 ?   currentIndex : 0 : 
            currentIndex > 0 ? --currentIndex : len - 1;

        $('#iframe').attr('src', locations[currentIndex]);
    });
        })
 

Таким образом, в основном div имеет класс предварительного просмотра, поэтому jquery должен активировать функцию при нажатии на div с классом предварительного просмотра, а затем, учитывая идентификаторы divs, он должен изменить src iframe, но, похоже, это не работает .

Редактировать: Хорошо, поэтому я создал совершенно новую страницу и попробовал метод @Rana, но он все еще не работал в моем браузере, поэтому я перешел в консоль, и там появились следующие ошибки:

Так что я не уверен, может быть, это как-то связано с загрузкой ссылок на YouTube из кода javascript?

Вот рабочий пример изменения src по нажатию кнопок, и каждый раз src отображается измененное.

• Первые src значения приведены в array
• Теперь прошелся по всем тегам с классом .srcChanger и добавил прослушиватель событий, который активируется click .
• Затем выполняется функция, которая принимает значение из array в соответствии с i th значением тега

 var locations = ["https://www.youtube.com/embed/K0u_kAWLJOA",
  "https://www.youtube.com/embed/c7nRTF2SowQ",
  "https://www.youtube.com/embed/6LOD-pwJY6E",
  "https://www.youtube.com/embed/8X2kIfS6fb8",
  "https://www.youtube.com/embed/p5yUKjOOWvM"
];

var btnSrc = document.getElementsByClassName("srcChanger");
for (let i = 0; i < btnSrc.length; i  ) {
  btnSrc[i].addEventListener('click', function() {
    document.getElementsByClassName("responsive_frame")[0].src = locations[i];
    document.getElementById("demo").innerHTML = locations[i];
  })
} 

 <div class="full">
  <iframe id="iframe" class="responsive_frame" src="https://www.youtube.com/embed/K0u_kAWLJOA"></iframe>
</div>
<button class="srcChanger">Btn1</button>
<button class="srcChanger">Btn2</button>
<button class="srcChanger">Btn3</button>
<button class="srcChanger">Btn4</button>
<button class="srcChanger">Btn5</button>


<div id="demo"></div> 

Вот рабочий пример приведенного выше кода