0

クリックしたときにインフォボックスのボタンの状態を変更する際に問題が発生しました。インフォボックス メニュー内の 6 つのボタンのそれぞれに、未クリック、ホバー、クリックの 3 つの状態があります。ボタンはクリックされた状態に変わりますが、何らかの理由で再度クリックしても元に戻りません。したがって、クリックごとに呼び出される buttonState() 関数内の if ステートメントに問題を突き止めました。この問題を解決したら、各ボタンの onClick に別の関数を追加して、表示する動的な情報をインフォボックスに伝えます。また、一度に 1 つのボタンだけが「クリックされた」状態になるようにする方法も考えなければなりません。それについての助けも素晴らしいでしょう。

ご覧のとおり、私は 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 に答える