Question

HTML

<div class="postcode map-wt"> 980005</div>
<div class="postcode map-wt"> 97005</div>       
<div class="postcode map-wt"> 30005</div>

JQuery的

var postcode = $(".postcode");
    var el = postcode;
    postcode.each(function(){
       el = $(this).text();
       postMap(el);
    });


    function postMap(postcode){
      container = $('.map-wt')
      container.append('<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode +'&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>");
    }

问题是它会在第一行的同一容器中打印所有图像。一直试图找到不同的方法，但似乎每个（功能）不通过每个邮政编码和附加地图。

如何让它在每个div中附加每个图像？

请帮助并欣赏它

Answer 1

您可以将目标元素作为参数传递，并将邮政编码传递给postMap()。

var postcode = $(".postcode");
postcode.each(function() {
  var $this = $(this),
      postcode = $this.text();
  postMap($this, postcode);
});


function postMap($el, postcode) {
  $el.append('<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode + '&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="postcode map-wt">98005</div>
<div class="postcode map-wt">97005</div>
<div class="postcode map-wt">30005</div>

在这种情况下，由于postcode和map-wt相同，您可以将this引用传递给postMap

Answer 2

您可以使用.append( callback )简化代码，如下所示：

$('.postcode').append(function() {
    var postcode = $(this).text();
    return '<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode +'&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>";
});

$('.postcode').append(function() {
    var postcode = $(this).text();
    return '<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode +'&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="postcode map-wt">98005</div>
<div class="postcode map-wt">97005</div>
<div class="postcode map-wt">30005</div>

或者如果你必须使用一个函数，你可以将this传递给函数，如下所示：

$('.postcode').append(function() {
    return postMap.apply(this);
});

function postMap() {
    var postcode = $(this).text();
    return '<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode +'&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>";
}

    $('.postcode').append(function() {
        return postMap.apply(this);
    });
    
    function postMap() {
        var postcode = $(this).text();
        return '<a href="https://www.google.com/maps/place/' + postcode + '"><img src="http://maps.google.com/maps/api/staticmap?center=' + postcode +'&markers=' + postcode + '&zoom=12&scale=false&size=250x275&maptype=roadmap&format=png&visual_refresh=true&sensor=false"' + "/></a>";
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="postcode map-wt">98005</div>
    <div class="postcode map-wt">97005</div>
    <div class="postcode map-wt">30005</div>

接下来在每个容器问题中附加地图图像

2 个答案: