1. ホーム
  2. 質問と答え
  3. Javascript：id "map"のh3ヘッダーの内容を見つける方法は？

Javascript：id "map"のh3ヘッダーの内容を見つける方法は？

2010-12-04 12 views
0

私はうまくいくGoogleマップを持つウェブページを持っています。代わりに、そこに「ボーフム」にハードコード都市名を有するので、私は、ヘッダーにJavascript：id "map"のh3ヘッダーの内容を見つける方法は？

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

を見つけて、私のinit（）関数内でその値を使用したいと思います。

私はおそらく以下のコードで何かマイナーなものがありません。私を助けてください、そのような "子供"のAPIリファレンスに私を参照してください、私のJavascriptのスキルは非常に錆びています。

また、私のマーカーの色のように、私のh3ヘッダーにもう1つの価値を渡すことができますか？

ありがとうございました！ アレックス

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>

出典

2010-12-04 Alexander Farber

+0

まず、jQueryを実際に使用する必要があります：http://jquery.com/ – CarneyCode

+0

1行で80kbのライブラリを読み込むのはなぜですか？ –

+0

@ Dr.Molle：一度圧縮されたのはわずか26kbです。アプリケーションコードをより単純で信頼性の高いものから完全なページサイズを小さくすることの間では、トレードオフです。たとえば、$（ '＃city'）。text（）を使用すると、それは短くなり、タグが削除された場合には破損しません。 – Douglas

答えて

4

より多くのデータを含めるには、あなたが属性を使用することができ

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を使用すると、コード内にその正確な文字列を使用できます。それは良い勝利です。また、これらをさらに1ページに収めたい場合は、将来的に$（ "。city"）を使用するのが簡単です。

出典

2010-12-04 12:33:47 Douglas

+0

ありがとうございますが、今は混乱しています：node.innerHTML、node.innerTextまたはnode.textContentを使用する必要があります。 –

+0

innerHTMLには、不要と思われるタグが含まれます。 innerTextとtextContentはどちらもテキスト（HTMLタグなし）を取得しますが、すべてのブラウザがinnerTextをサポートしているわけではありません。したがって、データ取得のための代替手段としてtextContentを追加しました。 jQueryソリューションを使用する場合は、すべてのブラウザで同じ（単純な）APIを使用するため、このようなブラウザ間の問題をほとんど無視できます。 – Douglas

-1

まあ、H3はありません、IDを持っていますか？ ID '街' は一意であると仮定すると

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

出典

2010-12-04 11:10:08

+0

htmlで正規表現を使用していなかったなら私はこれを投票したでしょう。代わりにinnerText/textContentを使用してください。 – Douglas

+0

前にinnerTextに問題がありましたが、もう一度やり直す必要があるかもしれません... –

0

（IDがあることを持っているもの）：jQueryのを使用して

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

あるいは、

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

出典

2010-12-04 11:16:02

1

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>

、私は<I>と</I >タグを失い、代わりにあなたのH3ノードのスタイルルールを追加します。その場合、cityNameはnode.innerHTMLだけになります。 

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

そして、このようにそれらを出す：

出典

2010-12-04 11:28:11 Alastair

 関連する問題

  • 関連する問題はありません^_^