Кажется, что вызов функции не работает в другой функции JQuery

Question

Я не могу понять, как правильно вызвать функцию, как показано на рисунке. Я хочу заменить весь повторяющийся код таким образом, чтобы он каждый раз получал его из информации о моей функции.

Я смотрел на другие сообщения и все, что касается стека, но не могу понять, как это выяснить.

$(document).ready(function() {

  $("option").click(function() {
    //alert("Value: " + $("#list").val());
    var foo = $("#list").val();

    if (foo == 1)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=wlkCQXHEgjA&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        info(foo);
      });

    if (foo == 2)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=_sBBaNYex3E&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        $('#headline').empty().append(data.items[0].snippet.title);
        $('#content').empty().append(data.items[0].player.embedHtml);
        $('#description').empty().append(data.items[0].snippet.description);
      });
      
    if (foo == 3)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=kHBcVlqpvZ8&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        $('#headline').empty().append(data.items[0].snippet.title);
        $('#content').empty().append(data.items[0].player.embedHtml);
        $('#description').empty().append(data.items[0].snippet.description);
      });
  });
});

function info(foo) {
  $('#headline').empty().append(data.items[0].snippet.title);
  $('#content').empty().append(data.items[0].player.embedHtml);
  $('#description').empty().append(data.items[0].snippet.description);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="list">
  <option value="1">Spot Launch</option>
  <option value="2">More Parkour Atlas</option>
  <option value="3">UpTown Spot</option>
  <option value="4">Handle Robot Reimagined for Logistics</option>
  <option value="5">What's new, Atlas?</option>
</select>

<br><br>

<div id="content"></div>
<h1 id="headline"></h1>
<div id="description"></div>

Answer 1

Я предполагаю, что вы хотите сделать что-то подобное, чтобы избежать повторения (вот как я понял ваш «заменить шаблон»?

function info(foo) {
    $('#headline').empty().append(foo.items[0].snippet.title);
    $('#content').empty().append(foo.items[0].player.embedHtml);
    $('#description').empty().append(foo.items[0].snippet.description);
}

, а затем использовать его следующим образом

$.get('your_url', function(data) {
    info(data);
});

Answer 2

<option> не реагирует на клики и не генерирует события кликов. Вместо этого используйте $("select").change(...), и ваш код работает. Функция foo вызывается. Тем не менее, data не определено внутри него, поэтому вам нужно передать его при вызове функции.

$(document).ready(function() {

  $("select").change(function() {
    //alert("Value: " + $("#list").val());
    var foo = $("#list").val();

    if (foo == 1)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=wlkCQXHEgjA&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        info(foo, data);
      });

    if (foo == 2)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=_sBBaNYex3E&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        $('#headline').empty().append(data.items[0].snippet.title);
        $('#content').empty().append(data.items[0].player.embedHtml);
        $('#description').empty().append(data.items[0].snippet.description);
      });
      
    if (foo == 3)
      $.get("https://www.googleapis.com/youtube/v3/videos?id=kHBcVlqpvZ8&key=AIzaSyAqMJi5sUllzUPLVe6tbC557Lc_J5CmiFs&part=snippet,contentDetails,statistics,status,topicDetails,player", function(data) {
        $('#headline').empty().append(data.items[0].snippet.title);
        $('#content').empty().append(data.items[0].player.embedHtml);
        $('#description').empty().append(data.items[0].snippet.description);
      });
  });
});

function info(foo, data) {
  $('#headline').empty().append(data.items[0].snippet.title);
  $('#content').empty().append(data.items[0].player.embedHtml);
  $('#description').empty().append(data.items[0].snippet.description);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="list">
  <option value="1">Spot Launch</option>
  <option value="2">More Parkour Atlas</option>
  <option value="3">UpTown Spot</option>
  <option value="4">Handle Robot Reimagined for Logistics</option>
  <option value="5">What's new, Atlas?</option>
</select>

<br><br>

<div id="content"></div>
<h1 id="headline"></h1>
<div id="description"></div>