增量JavaScript变量函数的onclick

这我工作的页面： http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html 增量JavaScript变量函数的onclick

当你点击一个阴影区域与区域相关的图表弹出。我试图弄清楚的是，如何让底部的“下一个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>

来源

2015-05-12 Nanette Hosenfeld

而不是让«a»在接下来替换（this），请尝试保留一个全局变量，其中选择了叠加。并在上一个/下一个de /增加这个变量。我认为你离解决方案不太远。当我点击“下一步”时，“a”是空的，它会加载第一个。 –

你需要移动递增数到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'; 
}

来源

2015-05-12 20:54:07

现在在replace（）函数的末尾我有PSA ++，所以递增是在replace（）函数中的，对吧？ –

@NanetteHosenfeld - 但是你不要在'replace（）'函数中使用'PSA'。你使用'nextPSA'，并且只在'overlay（）'中设置。 –

@NanetteHosenfeld - 我已经在代码中加入了我认为可以工作的答案。 –

增量JavaScript变量函数的onclick

回答

相关问题