Javascript: wie finden Sie die Inhalte der h3-header mit der id "map"?

Ich habe eine web-Seite mit einer Google Map, die gut funktioniert. Anstatt den Namen der Stadt fest auf "Bochum" dort möchte ich finden, der header

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

und verwenden Sie diesen Wert in meiner init () - Funktion.

Ich bin wahrscheinlich etwas fehlt-Moll im code unten. Bitte helft mir und bitte mich um die API-Referenz für ein solches "Kind", meine Javascript-Kenntnisse sind sehr eingerostet.

Außerdem Frage ich mich, wie konnte ich nur an einem mehr-Wert durch meine h3-überschrift, wie die Farbe für meine marker?

Danke!
Alex

Javascript: wie finden Sie die Inhalte der h3-header mit der id

<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>

Für den Anfang sollten Sie wirklich werden unter Verwendung von jQuery: jquery.com
Warum laden ein 80kb-Bibliothek für eine Sache, die getan werden kann mit einer Zeile?
es ist nur 26kb einmal komprimiert. Es ist ein trade-off zwischen der Anwendung code einfacher und zuverlässiger vs, womit die gesamte Seite auf eine kleinere Größe. Zum Beispiel, wenn wir mit $('#Ort').text(), dann ist es kürzer und wird nicht brechen, wenn die <i> - tag wird entfernt.
Danke, aber ich glaube nicht, lernen jQuery noch...

InformationsquelleAutor Alexander Farber | 2010-12-04

6

Enthalten mehr Daten, die Sie nutzen könnten Attribute:
```
<h3 id="city" data-citycolor="red"><i>Bochum</i></h3>
```
Und diese aus wie dieses:
```
var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");
```
Ich denke, dass Sie wäre besser dran, unter Verwendung von jQuery, auch wenn es ein 26kb-Bibliothek-Datei, denn dann kann man es vereinfacht so:
```
var city = $("#city");
var name = city.text();
var color = city.data("citycolor");
```
Beachten Sie, dass Sie verwendet "#Stadt" in der Sie kommentieren, und mit jQuery, können Sie diese Zeichenkette in Ihrem code. Das ist eine gute gewinnen. Es macht es auch leicht zu verwenden $(".Stadt") in der Zukunft, wenn Sie möchten, um mehr von diesen auf einer Seite.
- Danke, aber jetzt bin ich verwirrt: sollte ich die Knoten.innerHTML-Knoten.innerText oder Knoten.textContent und warum?
- innerHTML wird auch die <i> - tags, die Sie nicht wollen. innerText und textContent wird, bekommen beide nur den text (ohne html-tags), jedoch nicht von allen Browsern unterstützt innerText, also ich habe textContent als eine alternative Möglichkeit, um an die Daten. Wenn Sie die jQuery-Lösung können Sie weitgehend ignorieren, cross-browser-Problemen wie diesem, da es die gleiche (einfache) api in allen Browsern.
InformationsquelleAutor Douglas
1

Dem id-Attribut eindeutig sein muss für die Seite - in anderen Worten, man sollte nicht noch andere Elemente mit id="Stadt". Unter der Annahme, dass das der Fall ist, hier ein Beispiel von dem, was Sie tun könnten:
```
<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>
```
Als Vorschlag, ich würde verlieren, den <i> und </i> - tags, und stattdessen fügen Sie eine Stil-Regel für Ihre h3-Knoten. In diesem Fall wird der Städtename wäre nur Knoten.innerHTML.

InformationsquelleAutor Alastair
1

Gut, der h3 hat eine ID, keine?
```
var city = document.getElementById('city').innerText;
```
Oder mit jQuery:
```
var city = $('#city').text();
```
- Ich würde abgestimmt haben, werden diese, wenn Sie nicht verwendet hatten, ein regex auf html. Verwenden innerText/textContent statt.
- Ich habe Probleme mit innerText vor, aber vielleicht muss ich es nochmal probieren...
InformationsquelleAutor Félix Saparelli
0

Unter der Annahme, dass die ID 'Stadt' ist einzigartig(was für eine ID):
```
document.getElementById('city').getElementsByTagName('i')[0].firstChild.data
```
InformationsquelleAutor Dr.Molle

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.