0

单击时更改信息框按钮的状态时遇到问题。信息框菜单中的六个按钮中的每一个都具有三种状态：未单击、悬停和单击。按钮更改为单击状态，但由于某种原因，再次单击时它们不会变回来。因此，我将问题定位在每次单击时调用的 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>
4

1 回答 1

0

谢谢克里斯 

function buttonState(buttonid){

    $('button').not(buttonid).removeClass('down');
    $('button#'+ buttonid).toggleClass('down');
于 2013-03-26T17:50:35.357 回答