根据if语句显示隐藏的div部分

Question

我在页面上有一些隐藏的div像这样

<div class="form" id="scheduler" style="display: none;">

<div class="form" id="test" style="display: none;">

<div class="form" id="super" style="display: none;">

我想要一个可以基于这样的条件调用jscript来显示这些隐藏的div的脚本

<?php 
if ($_GET['id'] == 'scheduler') {
   call jscript function (show div id:scheduler in this case)
}
else if ($_GET['id'] == 'test') {
   call jscript function (show div id:test in this case)
}
else if ($_GET['id'] == 'super') {
   call jscript function (show div id:super in this case)
}
?>

谢谢。

Answer 1

您不能从PHP调用javascript函数，PHP是基于服务器端的，代表Java的基于浏览器的Preprocesing Hypertext。

您可以使用：

<?php 
    if ($_GET['id'] == 'scheduler') {
       $showdiv = 'scheduler';
    }
    else if ($_GET['id'] == 'test') {
       $showdiv = 'test';
    }
    else if ($_GET['id'] == 'super') {
       $showdiv = 'super';
    }
    echo "<script type=\"text/javascript\">document.getElementById('".$showdiv."').style.display = 'block';</script>";
?>

但这应该在加载这些div之后位于页面底部。

Answer 2

<script type='text/javascript'>
function showDivById(id){
    document.getElementById(id).visible = true;
}

<?php 
    $divs = array('scheduler','test','super');
    if (array_seach($_GET['id'], $divs)!==false)
        echo "showDivById({$_GET['id']})";
?>
</script>

请注意，PHP代码在 <script>

Answer 3

为什么不编写函数以接受查询字符串的id参数？ <script>thefunction($get);</script>

这样，您可以节省if逻辑，并开发更抽象的功能。 它更少的代码，更易于管理。

Answer 4

首先。 我会用jquery显示/隐藏divs ...

但我的概念与上面的有所不同，

<?php
  if($_GET['id']){
    echo '<script type="text/javascript">$(\'#'.$_GET['id'].'\').show();</script>';
  }
?>

希望你有我的主意，它很干净而且很动态:)

Answer 5

即使您已经接受了答案，另一种选择是借助某些JS仅使用JavaScript来轻松地从查询字符串中检索值。

function $get(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split('&');
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split('=');
    if (pair[0] == variable) {
      return pair[1];
    }
  }
}

var qs_id = $get('id');

if (['scheduler', 'test', 'super'].indexOf(qs_id) >= 0) {
  document.getElementById(qs_id).style.display = 'block';
}

演示： jsfiddle.net/Marcel/L69xt/show