增量JavaScript变量函数onclick

我正在处理的页面：http://gacc.nifc.gov/gbcc/predictive/psa_ercmap/dev/psaercmap1.html

单击阴影区域时，与该区域相关的图表弹出。我要弄清楚的是如何在底部获得"下一个PSA"链接，以将弹出窗口中的图表推向下一个PSA，每次单击它。我已经弄清楚了如何通过一个PSA推进它，但是无法超越那个PSA。您将查看是否单击链接。

i具有一个函数（称为替换），该函数替换了图表的图像源，并用指向下一个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>

您需要将将数字递增的代码移动到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';
}

相关内容

最新更新

热门标签：