Question

我正在使用Javascript引入已从外部URL完成的json种族列表。可能有1场比赛已完成或有100场比赛。单击该按钮，它将填充列表。完成后，我需要能够单击其中一个比赛按钮，并从外部URL拉入另一个json列表，并显示跑步者列表及其时间。

我的问题是如何使用Javascript使任何可能的1到100个按钮可点击以从外部网站引入数据。如果我单击第一个按钮，它将从website.com/1引入数据。如果我点击第二个，它会带来来自website.com/2的数据，依此类推。

这是我到目前为止的代码：

$("#getList").unbind("click").click(function() {
    $.getJSON("myURL.com/races/", dataFunc);

    function dataFunc(data) {
        $jsonData = data;
        displayRaces($jsonData.races.length, $jsonData)
    }
});

function displayRaces(length, json) {
    console.log("inside display races function");
    i = 0;
    while (i < length) {
        $race = json.races[i].race_name;
        var mydiv = document.getElementById("getResults");
        var aTag = document.createElement('BUTTON');
        var linkURL = "#" + i;
        aTag.setAttribute('id', linkURL);
        aTag.setAttribute('href', linkURL);
        aTag.innerHTML = $race;
        mydiv.appendChild(aTag);
        i++;
    }
}

这可以列出比赛的按钮列表。现在我需要弄清楚如何实现它，当我点击按钮时，它基本上可以运行类似的代码来显示跑步者。我想以某种方式使它成为

中的变量

$("#variable").unbind("click").click(function() {}

行，以便您可以说＆＃34;如果我单击按钮＃1，从myurl.com/data/1获取json数据并显示它＆＃34;

Answer 1

您可以为每个函数创建单独的函数，并将它们绑定到可以使用jQuery动态创建的对象。这是一个例子。你会用ajax调用api

替换数组查找

const raceData = [
  { id: 1, name: 'Race1', data: {} },
  { id: 2, name: 'Race2', data: {} }
]

function loadRaceData(url, targetId) {
  const data = raceData
    .filter(data => data.id === url)
  $(`#${targetId}`)
    .html(JSON.stringify(data[0], null, '  '))
}

function loadRaces() {
  $('#racelist').empty()
  $.each(raceData, (index, value) => {
    const raceDataId = `racedata-${value.id}`
    $('#racelist').append(
      $('<div>')
        .append(
          $('<button class="btn btn-primary">')
            .click(() => {
              loadRaceData(value.id, raceDataId)
            })
            .html(`Load ${value.name}`)
        )
        .append(
          $('<pre>')
            .attr('id', raceDataId)
        )
    )
  })
}

$('#loadRace')
  .click(() => {
    loadRaces()
  })

.raceData {
  min-height: 10px;
  background-color: lightgrey;
}

button {
  margin-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="container">
  <h3>Races</h3>
  <button type=button class="btn btn-default" id="loadRace">Load Races</button>
  <div id="racelist">
  </div>
</div>

使用Javascript制作创建新Javascript的按钮

1 个答案: