Question

我有一个带有Google地图的网页，效果很好。我没有将城市名称硬编码到那里的“Bochum”，而是想找到标题

<h3 id="city"><i>Bochum</i></h3>

并在我的init（）函数中使用该值。

我可能在下面的代码中遗漏了一些小问题。请帮助我，请参考我对这样一个“孩子”的API参考，我的Javascript技能非常生疏。

我也想知道，我怎么能通过我的h3标题再传递一个值，比如我标记的颜色？

谢谢！亚历

alt text

<html>
<head>
<style type="text/css">
        h1,h2,h3,p { text-align: center; }
    #map { width: 400; height: 200; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
        for (var child in document.body.childNodes) {
                child = document.body.childNodes[child];
                if (child.nodeName == "H3")
                        alert(child);
        }

    // use the #city value here instead
    city = 'Bochum';

    if (city.length > 1)
        findCity(city);
}

function createMap(center) {
    var opts = {
        zoom: 9,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    return new google.maps.Map(document.getElementById("map"), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode( { "address": city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            var map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos,
            });
        }
    });
}
</script>
<head>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
<div id="map"></div>
</body>
</html>

Answer 1

要包含更多数据，您可以使用属性：

<h3 id="city" data-citycolor="red"><i>Bochum</i></h3>

然后像这样把它们拿出来：

var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");

我认为你最好使用jQuery，即使它是一个26kb的库文件，从那以后你可以简化它：

var city = $("#city");
var name = city.text();
var color = city.data("citycolor");

请注意，您在注释中使用了“#city”，使用jQuery，您可以在代码中使用该完全字符串。这是一个很好的胜利。如果你想在一个页面上拥有更多这些内容，那么将来使用$（“。city”）也会变得微不足道。

Answer 2

页面的id属性应该是唯一的 - 换句话说，你不应该有id =“city”的任何其他元素。假设是这种情况，这里有一个你可以做的例子：

<html>
<script type="text/javascript">
    function init()
    {
        var node = document.getElementById("city");
        var cityName = node.childNodes[0].innerHTML;
        alert("Found city name: " + cityName);
    }
</script>

<body onload="init();">
    <h3 id="city"><i>Bochum</i></h3>
</body>
</html>

作为一个建议，我会失去＆lt; i＆gt;和＆lt; / i＆gt;标签，而是为您的h3节点添加样式规则。在这种情况下，cityName将只是node.innerHTML。

Answer 3

嗯，h3有ID，没有？

var city = document.getElementById('city').innerText;

或者，使用jQuery：

var city = $('#city').text();

Answer 4

假设ID“city”是唯一的（ID必须是什么）：

document.getElementById('city').getElementsByTagName('i')[0].firstChild.data

Javascript：如何找到id为“map”的h3标题的内容？

4 个答案: