Question

I have a map marker website that grabs Tattoo Parlours from Google maps and adds them as a marker to our interactive map.

I have a database with a "Messenger field". Basically, some of the markers have a "Send message" button tag on them where the user can message them directly.

However, not all of my markers need this tag, so I want to hide the tag from the marker if the data returns NULL.

Here's the code:

 //assign an infowindow to the marker so that when its clicked it shows the name of the place
                    google.maps.event.addListener(marker, 'click', (function (marker, x) {
                        return function () {
                            infowindow.setContent("<div class='no-scroll'><strong>" + results[x]['place']['name'] + "</strong><br><br>"
                                + results[x]['place']['address'] + "<br><br>"
                                + "<span style=\"display:table;margin:0 auto; color: #e7711b;\">"
                                + results[x]['place']['rating'] + "&nbsp;" + WPacStars.rating_render(results[x]['place']['rating'], 16, 'e7711b')
                                + "</span>"
                                +"<div id='more_info' align='center' style='margin: 0 auto;'>"
                                + "<a href='" + WPURLS.siteurl + "/reviews?place_id=" + results[x]['place']['id']
                                + "' target='_blank' style='text-align: center; display: block; margin-bottom: 5px; margin-top: 5px;text-decoration: none; font-size: 18px; color: #6495ed'>click here for more info</a>"
                                + "<a class="messenger-link" href='" + results[x]['place']['messenger']
                                + "' target='_blank' style='text-align: center; display: block; text-decoration: none; font-size: 14px; text-decoration: none; color: #6495ed'>Send Message</a>"
                                + "</div></div>");
                            infowindow.open(MYMAP.map, marker);
                        }
                    })(marker, x));
                }
            }
        }
    );
}
//}}

Hope someone can help/give guidance!

Cheers

Answer 1

您可以使用setAttribute在事后有条件地添加该属性。如果您有数据，请添加属性。

Answer 2

删除所有未a设置的href代码

＆＃13;

function removeAnchors(){
 $("a").each(function(){
  if($(this).attr("href") == "" || $(this).attr("href") == "null" || $(this).attr("href") == undefined || $(this).attr("href") == null) {
    $(this).remove();
  }
 })
}
removeAnchors(); // Call this function after adding the html dynamically

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com">Send Button</a>
<a href="">Send Button</a>
<a href="">Send Button</a>
<a href="">Send Button</a>
<a href="">Send Button</a>

＆＃13;

Answer 3

您可以使用以下内容替换您的JS代码。它可能会对你有帮助。

google.maps.event.addListener(marker, 'click', (function (marker, x) {
    return function () {
        var infoContent = "<div class='no-scroll'><strong>" + results[x]['place']['name'] + "</strong><br><br>";
        infoContent += results[x]['place']['address'] + "<br><br>";
        infoContent += "<span style=\"display:table;margin:0 auto; color: #e7711b;\">";
        infoContent += "results[x]['place']['rating'] + "&nbsp;" + WPacStars.rating_render(results[x]['place']['rating'], 16, 'e7711b')</span>";
        infoContent += "<div id='more_info' align='center' style='margin: 0 auto;'>";
        infoContent += "<a href='" + WPURLS.siteurl + "/reviews?place_id=" + results[x]['place']['id'] +" target='_blank' style='text-align: center; display: block; margin-bottom: 5px; margin-top: 5px;text-decoration: none; font-size: 18px; color: #6495ed'>click here for more info</a>";
        // this condition should be change as per your requirement as I dont know which data you want to compare with NULL value
        if(results[x]['place']['messenger'] != '' && results[x]['place']['messenger'] != null){                           
            infoContent += "<a class="messenger-link" href='" + results[x]['place']['messenger'] + "' target='_blank' style='text-align: center; display: block; text-decoration: none; font-size: 14px; text-decoration: none; color: #6495ed'>Send Message</a>";
        }
        infoContent += "</div></div>";
        infowindow.setContent(infoContent);
        infowindow.open(MYMAP.map, marker);
    }
})(marker, x));

隐藏<a> tag if data is NULL

3 个答案: