增量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

回答

相關問題