Question

这是我正在处理的页面： http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html

单击阴影区域时，弹出与该区域关联的图表。我想弄清楚的是如何获得＆＃34; Next PSA＆＃34;每次单击时，在底部链接以将弹出窗口中的图表推进到下一个PSA。我已经弄清楚如何通过一个PSA推进它，但是不能通过那个PSA。您将看到是否点击了该链接。

我有一个功能（称为替换），用于替换图表的图像源，并带有指向下一个PSA编号的链接。但是，我无法弄清楚如何让它增加。我尝试过PSA ++和PSA = PSA1但它们都不起作用。

这是我的代码：

<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    function overlay(a) {

            PSA = a.id;
            var numeric = a.id.replace('GB', '');
            PSAnum = Number(numeric)
            PSA1 = PSAnum + 1;
            nextPSA = ('0' + PSA1).slice(-2);
            var overlayContent = '';
            overlayContent += '<div id="overlay">';
            overlayContent += '<div>';
            var imgsrce = '';
            imgsrce += 'Charts/WebCharts/GB';
            imgsrce += numeric;
            imgsrce += '/ERCGraph.PNG';
            overlayContent += '<img id="chartimage" src="';
            overlayContent += imgsrce;
            overlayContent += '" />';

            overlayContent += '<br /><b><h1> <a href="#"     onclick="closePopup()">Close</a></b></h1>';
            overlayContent += '<b><h1>  <a href="#" onclick="replace(this)">Next PSA</a></b></h1>';
            overlayContent += '</div>';
            overlayContent += '</div>';
            $("#overlay").replaceWith(overlayContent);
            el = document.getElementById("overlay");
            el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
            if (el.style.visibility == "visible") {
                //el.style.visibility="hidden";
            }

        } //end of overlay function

    function replace(a) {

            image = document.getElementById('chartimage');
            console.log(image.src);
            console.log(PSA);
            image.src = 'Charts/WebCharts/GB';
            image.src += nextPSA;
            image.src += '/ERCGraph.PNG';
            PSA++;
            console.log(PSA);


        } //end of replace function

    $('.overlay-bg').click(function() {
        closePopup();
    });

    function closePopup() {
        el = document.getElementById("overlay");
        el.style.visibility = "hidden";
    }

    $(function() {
        $.get("getDate.php", function(data) {
            document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
        });
    });


    var file;
    file = 'GB_PSAdata_Real.js';

    $.getJSON(file, function(events) {
        var gbname = Object.keys(events);
        var divContent = '';
        divContent += '<div id="map">';
        divContent += '<map name="mapmap">';
        for (i = 0; i < gbname.length; i++) {
            var PSA = (gbname[i]);
            JSONcoords = events[PSA][0].Coords;
            JSONcoordString = JSONcoords.toString();
            divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
            divContent += JSONcoordString;
            divContent += '" onclick="overlay(this)">';

            //      console.log(divContent)
        }
        divContent += '</map>';
        divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
        divContent += '</div>';
        $("#map").replaceWith(divContent);


        //$("#overlay").replaceWith(overlayContent);
        ;
    })
</script>





</head>

<div id="overlay">

</div>

<body>
    <div id="header">
        <img src="PSlogo.png" style="height:75px">
        <img src="GBlogo.png" style="height:75px">
        <span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
    </div>
    <div id="main">
        <div id="map"></div>
        <div id="timestamp">RAWS Observations Updated</div>
        <div id="legend">
            <img src="LegendFull2.png" id="legendIMG">
        </div>


    </div>
</body>

</html>

Answer 1

您需要将增加数字的代码移动到replace()函数中，以便每次调用replace()时执行该代码。目前，只有在调用overlay()函数时才执行一次。

首先，显式声明一个全局变量（在任何函数之外）：

var currentPSANum = null;

将此行放在overlay()函数中：

currentPSANum = Number(a.id.replace('GB',''));

然后对replace()函数使用以下内容：

function replace(a) {
    currentPSANum++;

    var image = document.getElementById('chartimage');

    image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}

增加javascript变量函数onclick

1 个答案: