Question

我不太清楚如何正确调用该函数，如图所示。我想替换所有的重复代码，以便每次都能从我的函数信息中获取它。

我查看了其他stackoverflow帖子和内容，但似乎无法弄清楚。

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

this.changeLang(option.value)对点击没有反应，也不会发出点击事件。而是使用<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);
}

Answer 2

为了避免重复，我想您想做这样的事情（这就是我对您的“替换样板”的理解？

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);
});

函数调用似乎无法在另一个函数JQuery中工作

2 个答案: