更改谷歌地圖信息框中點擊按鈕的狀態

我遇到了一個問題，單擊時更改我的信息框按鈕的狀態。對於信息框菜單中的六個按鈕，我有三種狀態：未點擊，懸停和點擊。按鈕變成點擊狀態，但由於某些原因，再次點擊時它們不會變回。因此，我已將問題定位到每次單擊時調用的buttonState（）函數內的if語句。一旦我解決了這個問題，我將爲每個按鈕的onClick添加另一個函數，告訴信息框哪些動態信息要顯示。我還必須弄清楚如何確保一次只有一個按鈕處於「單擊」狀態。任何幫助也會很好。如你所見，我是jquery和javascript的新手。任何幫助，將不勝感激。非常感謝你。更改谷歌地圖信息框中點擊按鈕的狀態

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?  key=MY_KEY&sensor=true"></script> 
    <script type="text/javascript" src="jquery191.js"></script> 
    <script type="text/javascript" src="infobox.js"></script> 
    <script type="text/javascript"> 

var mapstyle = [styles removed for space] 

var icon = 'mapicon.png'; 
var map = null; 


//<![CDATA[ 

function mapload() { 
    map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(40,-95), 
    zoom: 4, 
    minZoom: 4, 
    disableDefaultUI: true, 
    styles: mapstyle, 
    mapTypeId: 'roadmap' 
    }); 

downloadUrl("genxml.php", function(data) { 
    var xml = data.responseXML; 
    var places = xml.documentElement.getElementsByTagName("place"); 
     for (var x = 0; x < places.length; x++) { 
     var name = places[x].getAttribute("name"); 
     var logopath = places[x].getAttribute("logopath"); 
     var number = places[x].getAttribute("number"); 
     var street = places[x].getAttribute("street"); 
     var city = places[x].getAttribute("city"); 
     var website = places[x].getAttribute("website"); 
     var phone = places[x].getAttribute("phone"); 
     var point = new google.maps.LatLng(
      parseFloat(places[x].getAttribute("lat")), 
      parseFloat(places[x].getAttribute("lng"))); 
     createMarker(name, logopath, number, street, city, website, phone, point); 
     } 

}); 
} 

function createMarker(name, logopath, number, street, city, website, phone, point) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon, 
     title: name 
    }); 

    var boxContent = "<div id=box><div id=leftside><img id=logo src=" + 
        logopath + " /><h1>" + number + "<br />" + street + 
        "<br />" + city + "</h1><h2>" + phone + 
        "<br /><a target=_blank href=" + website + 
        ">visit website</a></h2></div><div id=menu>" + 
        "<button id=photos onClick=buttonState(this.id)>" + 
        "</button><button id=comments onClick=buttonState(this.id)>" + 
        "</button><button id=games onClick=buttonState(this.id)></button>" + 
        "<button id=ed onClick=buttonState(this.id)></button>" + 
        "<button id=stay onClick=buttonState(this.id)></button>" + 
        "<button id=fly onClick=buttonState(this.id)></button>" + 
        "</div><div id=display><button id=next></button><button id=prev></button></div></div>"; 
    var myOptions = { 
     content: boxContent, 
     disableAutoPan: false, 
     pixelOffset: new google.maps.Size(-400, -173), 
     closeBoxMargin: "-12px -12px 0px 0px", 
     closeBoxURL: "close.png", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 

    var ib = new InfoBox(myOptions); 

    google.maps.event.addListener(marker, 'click', function(e) { 
     map.setZoom(13); 
     map.setCenter(this.getPosition());      
     ib.open(map, this); 
    }); 

} 

function buttonState(buttonid){ 

if ($('#' + buttonid).css('background-image') === 'url(infomenu/' + buttonid + '-click.png)') { 
    $('#' + buttonid).css('background-image','url(infomenu/' + buttonid + '.png)') 
} 
else { 
    $('#' + buttonid).css('background-image','url(infomenu/' + buttonid + '-click.png)'); 
    } 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
    new ActiveXObject('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
} 

function doNothing() {} 

//]]> 

</script> 

</head> 
<body onload="mapload()"> 
    <div id="map" style="width:100%; height:100%"></div> 
    <div id="logosearch"></div> 
</body> 
</html>

來源

2013-03-25 stokexx

我想你需要的是jQuery的[.toggle（）]（http://api.jquery.com/toggle/） – chriz 2013-03-25 15:16:51

我不認爲這可能是最好的解決方案。但是，我不確定如何使用多個按鈕來實現它，每個按鈕都有不同的圖標。你會介意提供一個這樣做的例子嗎？ – stokexx 2013-03-25 15:21:38

現在我已將圖標附加到背景圖像。我想我可以做什麼我分離圖像並將其添加到按鈕，保持背景（狀態更改的部分）可自由操作。如果我能管理，我會回來一個解決方案。 – stokexx 2013-03-25 15:33:15

感謝chriz

function buttonState(buttonid){ 

    $('button').not(buttonid).removeClass('down'); 
    $('button#'+ buttonid).toggleClass('down');

來源

2013-03-26 17:50:35 stokexx

更改谷歌地圖信息框中點擊按鈕的狀態

回答

相關問題