在javascript中使用PHP变量

utilize PHP variable in javascript

本文关键字：PHP 变量 javascript      更新时间：2023-09-26

我刚刚问了另一个问题:全局变量和减少数据库访问PHP+MySQL我使用PHP+MySQL。该页面访问数据库并检索所有项目数据，并列出它们。我打算打开一个新页面，但现在我想用javascript来显示一个popdiv。但是我不知道如何利用PHP的变量在新的div。下面是代码:

<html>
</head>
<script type="text/javascript">
function showDiv() {
    document.getElementById('infoDiv').style.visibility='visible';
}
function closeDiv() {
    document.getElementById('infoDiv').style.visibility='hidden';
}
</script>
</head>
<body>
<ul>
<?php foreach ($iteminfos as $iteminfo): ?>
    <li><a href="javascript:showDiv()"><?php echo($iteminfo['c1']); ?></a></li>
<?php endforeach;?>
</ul>
<div id="infoDiv" style="visibility: hidden;">
    <h1><?php echo($c1) ?></h1>
    <p><?php echo($c2) ?></p>
    <p><a href="javascript:closeDiv()">Return</a></p>
</div>
</body>
</html>

"iteminfo "是来自数据库的结果，每个$iteminfo有两个值$c1和$c2。在"infoDiv"中，我想显示所选项的详细信息。怎么做呢?

谢谢你的帮助!

进一步的问题:如果我想使用，例如，$c1作为文本，$c2作为img scr， $c1也作为img alt;或者$c2作为href，怎么做呢?

试试这个:

<?php foreach ($iteminfos as $iteminfo): ?>
  <li>
    <a href="javascript:showDiv(<?php echo(json_encode($iteminfo)) ?>)">
      <?php echo($iteminfo['c1']); ?>
    </a>
  </li>
<?php endforeach;?>

同样，修改showDiv以获取行数据:

function showDiv(row) {
  document.getElementById('infoDiv').style.visibility='visible';
  document.getElementById('infoDiv').innerHTML = row['c1'];
}

基本上，您必须考虑javascript在PHP脚本执行结束后很长一段时间仍在浏览器中运行。因此，你必须将javascript可能需要的所有数据嵌入到网站中，或者在运行时获取它(这会使事情变得更慢，更复杂)。

您是否希望在页面上列出多个项目的单个信息区域，当您单击一个项目时，信息区域将被新内容取代?或者你想要一个新的信息区域为每个项目??

我看到了与第一种方法类似的东西，所以我将处理后一种方法。

<?php
//do some php magic and get your results
$sql = 'SELECT title, c1, c2 FROM items';
$res = mysql_query($sql);
$html = '';
while($row = mysql_fetch_assoc($res)) {
    $html .= '<li><a class="toggleMe" href="#">' . $row['title'] . '</a><ul>';
    $html .= '<li>' . $row['c1'] . '</li><li>' . $row['c2'] . '</li></ul>';
    $html .= '</li>'; //i like it when line lengths match up with eachother
}
?>
<html>
</head>
<script type="text/javascript">
window.onload = function(){ 
    var els = document.getElementsByClassName("toggleMe");
    for(var i = 0, l = els.length; i < l; i++) {
        els[i].onclick = function() {
           if(this.style.display != 'none') {
            this.style.display = 'block';
           } else {
            this.style.display = 'none';
           }
        }
    }
}
</script>
</head>
<body>
<ul>
<?php
echo $html;
?>
</ul>
</body>
</html>
相关文章：