从 onchange 事件中创建一个全局变量

Question

如何从 onchange 事件中创建一个全局变量，以便我的 js 页面中的每个函数都可以使用该变量中的值？任何人都可以提供一个工作示例代码。

onchange="showTable()" 来自 ma​​in.php 的事件：

<?php
    $linkID = @ mysql_connect("localhost", "root", "Newpass123#") or die("Could not connect to MySQL server");
    @ mysql_select_db("seatmapping") or die("Could not select database");
    $dbname = "seatmapping";
    $sql = "SHOW TABLES FROM $dbname where tables_in_seatmapping!='userauth'";
    $result = mysql_query($sql);
    $tableNames= array();

    while ($row = mysql_fetch_row($result)) {
        $tableNames[] = $row[0];
    }

    echo '<select name="tables" id="tables" onchange="showTable(this.value)">'; 
    echo '<option class="placeholder" selected disabled>Layouts</option>';
    foreach ($tableNames as $name){
        echo '<option value="'. $name.'">'.$name.'</option>';
    }
    echo '</select>';
?>

onclick="showAvailable()" 来自 ma​​in.php 的事件：

<div class="sliderContainer">

    <div id="slider">
        <a class="ui-slider-handle" href="#">Start</a>
        <a class="ui-slider-handle" href="#">End</a>
    </div>

    <p>
    <a id="timer"><span class="slider-time">10:00 AM</span> to <span class="slider-time2">12:00 PM</span></a>

    <a href="#" id="checkAvailable" onclick="showAvailable()">Avail</a>
    <a href="#" id="resetAvailable" onclick="resetAvailable()">Reset</a></p>

</div>

我在 .js 页面中的函数：

var tableName;

function showTable(tableName){
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
      tableName = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?tableName="+tableName,true);
  xmlhttp.send();
}

function showAvailable(){
  var startShift = $('#slider').slider("values", 0);
  var endShift = $('#slider').slider("values", 1);

  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?startShift="+startShift+"&endShift="+endShift+"&tableName="+tableName,true);
  xmlhttp.send();
}

这是 seatmap.php 的 sn-p，它太长了，但我将 $tableName 用于 showAvailable 和 showTable。我也在查询中使用它：

<?php

$startSlider=intval($_GET['startShift']);
$endSlider=intval($_GET['endShift']);
$tableName = strval($_GET['tableName']);

$linkID = @ mysql_connect("localhost", "root", "Newpass123#") or die("Could not connect to MySQL server");
@ mysql_select_db("seatmapping") or die("Could not select database");

/* Create and execute query. */
$query = "SELECT rowId,columnId,status,name,seatid,startShift,endShift from $tableName group by seatid order by rowId, columnId desc";
$result = mysql_query($query);
$prevRowId = null;
$seatColor = null;
$tableRow = false;

//echo $result;
echo $tableName;

我想要的是如何使 onchange=showTable(this.value) 中的值成为全局变量，以便我可以在函数 showAvailable 中使用它并将其传递给 php 页面。任何形式的帮助表示赞赏。提前谢谢你。

Answer 1

在函数showTable()之前创建变量，例如var global_var;，然后在showTable()中赋值，然后你就可以在showAvailable()中使用了，但是记得检查它是否不为空。

编辑： 你的 .js 现在应该是这样的（你覆盖了一些变量）：

var tableName;

function showTable(localTable){
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
      tableName = localTable;
    }
  }
  xmlhttp.open("GET","seatmap.php?tableName="+localTable,true);
  xmlhttp.send();
}

function showAvailable(){
  var startShift = $('#slider').slider("values", 0);
  var endShift = $('#slider').slider("values", 1);

  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }
  else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","seatmap.php?startShift="+startShift+"&endShift="+endShift+"&tableName="+tableName,true);
  xmlhttp.send();
}

Answer 2

您可以通过将变量添加到窗口对象来简单地创建一个全局变量，并且它对所有函数都是可见的。

window.globalValue = "some value";

但这不是最好的方法，我们应该尽量减少全局变量。最佳做法是 - 在全局中创建命名空间 将变量添加到该全局命名空间。

通过这种方式，您可以保持全局清洁并且代码更易于维护。

window.Namespace = {};
Namespace.varOnChange = "some value";

我想你正在寻找的是 -

var myNamespace = {};

function showTable(tableName){
 if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
 }
 else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("showLayout").innerHTML=xmlhttp.responseText;
        myNamespace.name = xmlhttp.responseText;
    }
 }
 xmlhttp.open("GET","seatmap.php?tableName="+tableName,true);
 xmlhttp.send();
}