1. 홈
  2. 질의 응답
  3. Javascript : id가 "map"인 h3 헤더의 내용을 찾는 방법은 무엇입니까?

Javascript : id가 "map"인 h3 헤더의 내용을 찾는 방법은 무엇입니까?

2010-12-04 4 views
0

Google지도가 잘 작동하는 웹 페이지가 있습니다. 대신이 "보훔"하드 코드 도시 이름을 가진, 나는 헤더를Javascript : id가 "map"인 h3 헤더의 내용을 찾는 방법은 무엇입니까?

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

를 찾아 내 초기화() 함수에서 그 값을 사용하고 싶습니다.

나는 아래 코드에서 사소한 것이 빠졌을 것입니다. 제발 저를 도우며 자바 API 기술은 매우 녹슬다.

또한 내 마커의 색상처럼 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>

출처

2010-12-04 Alexander Farber

+0

처음에는 정말로 jQuery를 사용해야합니다. http://jquery.com/ – CarneyCode

+0

한 줄로 작업을 수행하기 위해 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를 사용하면 코드에서 그 정확한 문자열을 사용할 수있다. 그것은 좋은 승리입니다. 또한 한 페이지에 더 많은 것을 갖고 싶다면 앞으로도 $ (". 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"를 가진 다른 요소를 가져서는 안됩니다. 나는 < 내가 > 및 </I > 태그를 잃게하고 대신 H3 노드에 대한 스타일 규칙을 추가, 제안으로

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

: 그런 경우가 있어요 가정하면, 여기 당신이 무엇을 할 수 있는지의 예입니다. 이 경우 cityName은 node.innerHTML이됩니다.

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

을 그리고 같은 그들을 얻을 : 더 많은 데이터를 포함하려면

출처

2010-12-04 11:28:11 Alastair

관련 문제

 관련 문제