Fatal编程技术网

增量javascript变量函数onclick

javascript jquery html function

增量javascript变量函数onclick,javascript,jquery,html,function,Javascript,Jquery,Html,Function,这是我正在处理的页面： 单击阴影区域时，将弹出与该区域关联的图表。我想弄清楚的是，如何让底部的下一个PSA链接在每次单击时将弹出窗口中的图表前进到下一个PSA。我已经想出了如何让它提前一个PSA，但无法让它通过那个PSA。你会看到如果你点击链接 我有一个名为replace的函数，它将图表的图像源替换为指向下一个PSA编号的链接。然而，我不知道如何使它增加。我尝试了PSA++和PSA=PSA1，但两者都不起作用 这是我的密码： <title>DEV PSA ERC Map DEV&l

这是我正在处理的页面：

单击阴影区域时，将弹出与该区域关联的图表。我想弄清楚的是，如何让底部的下一个PSA链接在每次单击时将弹出窗口中的图表前进到下一个PSA。我已经想出了如何让它提前一个PSA，但无法让它通过那个PSA。你会看到如果你点击链接

我有一个名为replace的函数，它将图表的图像源替换为指向下一个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时执行它。当前，在调用覆盖函数时仅执行一次

首先，在任何函数外显式声明全局变量：

var currentPSANum = null;

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

function replace(a) {
    currentPSANum++;

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

    image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}
将此行放在覆盖函数内：

var currentPSANum = null;

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

function replace(a) {
    currentPSANum++;

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

    image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}
然后使用以下替换功能：

var currentPSANum = null;

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

function replace(a) {
    currentPSANum++;

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

    image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}
不要在下一步从replacethis获取«a»，而是尝试保留一个选中覆盖的全局变量。上一次/下一次取消/增加该变量。我想你离解决问题不远了。当我单击“下一步”时，«a»为空，它将加载第一个。现在，在替换函数的末尾，我有PSA++，所以递增是在替换函数中，对吗？@Nanetthesenfeld-但在替换函数中不使用PSA。您使用的是nextPSA，这只在覆盖中设置。@Nanetthosenfeld-我已经用我认为有效的代码添加到我的答案中。John，您太棒了。万分感谢！这是我第一次问问题，所以只要我能想出如何接受你的回答，我就会这么做。谢谢@NanetteHosenfeld-我在这里发布了一些更干净的代码。它没有运行，但我不想在我的答案中发布代码。添加诸如getImageSrc函数之类的函数以消除重复的代码可能会使您受益匪浅。