当我显示所有地址时,我正在尝试更新地图图像。 我有5个地址,但只显示一张地图,这是所有5个地址的第一张地图。

但是每次我点击显示地址时,它只会给我相同的地图模板。 我该如何编码将地图更改为我的获取地址功能中列出的地址的位置。

  function startUp(){ wireHandlers(); }; function getAddresses(){ return [ {'name': 'Facebook', 'lineOne': '1 Hacker Way', 'lineTwo': 'Menlo Park, CA 94025', 'city': 'Menlo Park', 'state': 'CA', 'zipCode': '94025', 'country': 'United States'}, {'name': 'Buena Park Home', 'lineOne': '6490 Crescent Ave', 'lineTwo': 'Buena Park CA 90620', 'city': 'Buena Park', 'state': 'CA', 'zipCode': 92804, 'country': 'United States'}, {'name': 'Home', 'lineOne': '1030 N Magnolia Ave', 'lineTwo': 'Anaheim CA 92801', 'city': 'Anaheim', 'state': 'CA', 'zipCode': 92801, 'country': 'United States'}, {'name': 'Nationwide', 'lineOne': '1360 E Walnut St', 'lineTwo': 'Pasadena CA 91106', 'city': 'Pasadena', 'state': 'CA', 'zipCode': 91106, 'country': 'United States'}, {'name': 'Seacliff Self Storage', 'lineOne': '18100 Kovacs Ln', 'lineTwo': 'Huntington Beach CA 92648', 'city': 'Huntington Beach', 'state': 'CA', 'zipCode': 92648, 'country': 'United States'} ] }; function wireHandlers(){ $('#showsAddresses').on('click', onShowAddresses); $('#emptyAddresses').on('click', emptyAllAddresses); $('.deleteAddress').on('click', onDeleteAddress); }; function onShowAddresses(e){ e.preventDefault(); var addresses = getAddresses(); console.log(addresses); renderAddresses(addresses); }; function getTemplate(){ return $($('#addressTemplate').html()); }; function renderAddresses(addressArr){ for (let index = 0; index < addressArr.length; index++) { const template = getTemplate(); template.find('.card-name').text(addressArr[index].name); template.find('.line-one').text(addressArr[index].lineOne); template.find('.line-two').text(addressArr[index].lineTwo); template.find('.city-name').text(addressArr[index].city); template.find('.state-name').text(addressArr[index].state); template.find('.zip-code').text(addressArr[index].zipCode); template.find('.country').text(addressArr[index].country); $('.clone-container').append(template); } }; function emptyAllAddresses(){ $('.clone-container').empty(); }; function onDeleteAddress(){ // $('.deleteAddress').click(function(){ // $('.deleteAddress').remove(); // }); }; 

当我显示所有地址时,我正在尝试更新地图图像。 我有5个地址,但只显示一张地图,这是所有5个地址的第一张地图。

    function renderAddresses(addressArr){
        for (let index = 0; index < addressArr.length; index++) {
            const template = getTemplate();
            template.find('.card-name').text(addressArr[index].name);
            template.find('.line-one').text(addressArr[index].lineOne);
            template.find('.line-two').text(addressArr[index].lineTwo);
            template.find('.city-name').text(addressArr[index].city);
            template.find('.state-name').text(addressArr[index].state);
            template.find('.zip-code').text(addressArr[index].zipCode);
            template.find('.country').text(addressArr[index].country);
            $('.clone-container').append(template);


        }
    };

#1楼 票数:0

您可以考虑使用$.each() 这是一个例子:

function startUp() {
  wireHandlers();
};

function getAddresses() {
  return [{
      'name': 'Facebook',
      'lineOne': '1 Hacker Way',
      'lineTwo': 'Menlo Park, CA 94025',
      'city': 'Menlo Park',
      'state': 'CA',
      'zipCode': '94025',
      'country': 'United States'
    },
    {
      'name': 'Buena Park Home',
      'lineOne': '6490 Crescent Ave',
      'lineTwo': 'Buena Park CA 90620',
      'city': 'Buena Park',
      'state': 'CA',
      'zipCode': 92804,
      'country': 'United States'
    },
    {
      'name': 'Home',
      'lineOne': '1030 N Magnolia Ave',
      'lineTwo': 'Anaheim CA 92801',
      'city': 'Anaheim',
      'state': 'CA',
      'zipCode': 92801,
      'country': 'United States'
    },
    {
      'name': 'Nationwide',
      'lineOne': '1360 E Walnut St',
      'lineTwo': 'Pasadena CA 91106',
      'city': 'Pasadena',
      'state': 'CA',
      'zipCode': 91106,
      'country': 'United States'
    },
    {
      'name': 'Seacliff Self Storage',
      'lineOne': '18100 Kovacs Ln',
      'lineTwo': 'Huntington Beach CA 92648',
      'city': 'Huntington Beach',
      'state': 'CA',
      'zipCode': 92648,
      'country': 'United States'
    }
  ];
};

function wireHandlers() {
  $('#showsAddresses').on('click', onShowAddresses);
  $('#emptyAddresses').on('click', emptyAllAddresses);
  $('.deleteAddress').on('click', onDeleteAddress);
};

function onShowAddresses(e) {
  e.preventDefault();
  var addresses = getAddresses();
  console.log(addresses);
  renderAddresses(addresses);
};

function getTemplate() {
  var clone = $("#addressTemplate").html();
  return $(clone);
};

function renderAddresses(addressArr) {
  var temp;
  $.each(addressArr, function(i, a) {
    temp = getTemplate();
    $(".card-name", temp).html(a.name);
    $(".line-one", temp).html(a.lineOne);
    $(".line-two", temp).html(a.lineTwo);
    $(".city-name", temp).html(a.city);
    $(".state-name", temp).html(a.state);
    $(".zip-code", temp).html(a.zipCode);
    $(".country", temp).html(a.country);
    $('.clone-container').append(temp);
  });
};

function emptyAllAddresses() {
  $('.clone-container').html("");
};

function onDeleteAddress() {
  $(this).parent().remove();
};

查看更多: jQuery.each()

如果不起作用,则可能需要查看getTemplate()函数,并可以考虑使用.prop("outerHTML")

  ask by Paolo Mosca translate from so

未解决问题?本站智能推荐:

1回复

在传单地图更新表单输入字段上设置并拖动标记,而无需发送

包括传单和jQuery在内,我有以下代码: 通过单击,我在地图上设置了一个标记。 在此过程中,我想在提交之前更新输入字段。 另外,如果我在地图上拖动标记,则输入字段应更新。 最后一个标记也可以删除,因此我只需要处理一个标记。 有人可以概述一下该如何做吗? 我不打算在
1回复

jQuery UI地图更新集群位置

我正在构建一个googlemaps网络应用程序,它具有一系列静态标记以及代表“现场”工作人员的一系列标记,我能够通过ajax检索长期,长期的工作人员。 但是使用jquery ui map v3,我无法使用匹配的人员ID更新标记的位置。 如何更改标记位置,然后更新地图视图? 谢谢
1回复

地图更新后程序崩溃

我是网络开发和开发程序的初学者,在该程序中,我通过使用传单通过ajax调用来更新地图,并且效果很好。现在我每10秒更新一次地图,因此我的更新地图的功能如下: 然后我在 但这可以正常工作一段时间,然后该错误表明浏览器没有内存,因此当我查看相同的错误时,我认为超时功能应该有问题。
1回复

更改地图更新缩放(JS)

我有地图更新功能 这是代码 它需要通过控制器从数据库获取值 这是控制器代码。 而不是将它们传递给地图并更新标记。 这是MapWrapper脚本 MapWrapper 使用标记都可以,但是更新时无法缩放。 当我重新加载地图时,一切正常。 但不是
2回复

谷歌地图更新jQuery移动问题

我想使用最新版本的JQuery Mobile,但由于Google Maps现在无法使用而出现问题... 使用1.0a2版,谷歌地图可以正常工作,但是现在使用1.3.1版,我有一个空白页! 在我的HTML代码中,我使用的是DIV id =“ map”:div id =“ map” st
1回复

变量不会更新到功能之外

正如标题所示,我的代码出了点问题。 该代码用于匹配游戏,我将文档分为两个(节点),并在一侧随机生成笑脸,然后将其克隆到另一侧。 我删除了RHS上的最后一个孩子(脸),以便用户随后必须单击页面LHS上的额外笑脸才能进入下一个级别,这时添加了5个笑脸以增加难度。 用户应该单击左侧的额外笑脸
1回复

while循环中的地图地址解析评估不正确

我正在尝试在while循环中使用Geocode API,但没有运气。 看来,我的while循环中的if语句要到while循环结束时才求值。 我想知道是否是因为Geocode API需要时间来响应,但我似乎无法正确评估它。 这是我的代码:
2回复

使用地图更新对象(内联 es6)

我有这个代码,它的工作 但如果我这样做就行不通了 Obj 已更新但系列未更新 最后我想要这样的形式 但它没有用