Question

我正在实例化一个类中的新变量。该类有一个构造函数，city，然后通过foursquare API获取爵士乐俱乐部。

当我将城市名称硬编码到实例化的类中时，它可以正常工作。但是，当我想为它提供动态值（通过DOM抓取的来自搜索栏的查询）时，它将无法识别城市。这是代码：

课程：

class Venues {
constructor(city) {
    this.id = '...';
    this.secret = '...';
    this.city = city;
}
async getVenues() {
    const response = await  fetch(`https://api.foursquare.com/v2/venues/search?near=${this.city}&categoryId=4bf58dd8d48988d1e7931735&client_id=${this.id}&client_secret=${this.secret}&v=20190309`);

    const venues = await response.json();

    return venues;
  }
}

const input = document.getElementById('search-input').value;
const button = document.getElementById('button');

const jazzClubs = new Venues(input);

button.addEventListener('click', (e) => {
    e.preventDefault();

    getJazzVenues();

})

function getJazzVenues() { 
jazzClubs.getVenues()
    .then(venues => {
        console.log(venues);
    })
    .catch(err => {
        console.log(err);
    });
}

任何人都知道为什么input变量的值不能被新实例化的jazzClubs变量识别吗？

此外，如果您有关于如何更好地或更巧妙地构造此代码的技巧，我将欢迎您提出任何建议（类定义已在单独的文件中）。

非常感谢你们！

亚当

Answer 1

您需要确保在单击按钮后触发以下语句。

const input = document.getElementById（'search-input'）。value;

const jazzClubs =新场地（输入）;

您的代码看起来也太复杂了。使用jquery使用更简单的代码。尝试这样的事情：

if (e.item.Text == "" )
{

    e.item.Visible = false;

}

  $(document).ready(function() {

    $("#search-button").click(function() {
      var searchval = $("#search-input").val();
      var id = "xxx";
      var secret = "yyy";
      alert(searchval);
      var url = "https://api.foursquare.com/v2/venues/search?near=" + searchval + "&categoryId=4bf58dd8d48988d1e7931735&client_id=" + id + "&client_secret=" + secret + "&v=20190309";
      alert(url);
      $.ajax({
        url: url,
        dataType: 'json',
        success: function(data) {
          var venues = data.response.venues;
          alert(venues);
          $.each(venues, function(i, venue) {
            $('#venue-result').append(venue.name + '<br />');
          });
        }
      });

    });
  });

JS：实例化变量将无法识别输入值

1 个答案: