Question

使用下面的jquery：

<script>
$(document).ready(function(){ $("#myiframe").hide(); });
$(document).ready(function(){ $("#submit").click(function(){ $("#myiframe").delay(1000).show(0); }); });
</script>

即使在php脚本中，我也可以成功隐藏在“if”中声明的iframe。见下文：

<?php
   $minAge = 22;
   $minAge *= 3600*24*365.25;  // $minAge in seconds

   if(isset($_POST['submit'])){
      $birth_date = strtotime($_POST['dob']);
      $now = strtotime("now");
      $age = $now - $birth_date; // age is in seconds
?>
    <iframe id = "myiframe" style='position: absolute; z-index: 10; height: 100%;'
            src = "<?php echo ($age > $minAge ? 'http://URL1.com' : 'http://URL2.com'); ?>"
            frameborder = "0"
            width = "350px"
    </iframe>

但是点击一个应该显示iframe的按钮，我希望它显示一秒延迟（如jquery中所示）。

请参阅此处表单中实施的按钮：

    <form method="post" id="form">
        <p2>Please select your date of birth below to verify your age.</p2>
        <input type="date" name="dob">
        <input type="submit" name="submit" value="Verify Age" id="submit" />
    </form>

完整代码在这里： http://pastebin.com/EaafieB7

基本上它应该做的是：默认隐藏iframe，在需要时显示延迟。到目前为止，它只是成功隐藏。

如果有人能够指出我哪里出错了，我会很感激的！

Answer 1

好的，我看到你现在正在尝试做什么，但它不会那样工作。有两种方法可以解决这个问题：

使用PHP进行年龄验证检查并仅在验证成功时打印iframe。这样做的缺点是它会重新加载页面，这是一种你显然不想要的行为。
使用Javascript进行年龄验证检查，但您必须拦截表单提交处理程序，以便不通过e.preventDefault()重新加载页面。

如果你真的坚持使用PHP进行年龄验证，那么第三种选择是使用AJAX调用，但那只会过度使用它。

Answer 2

您的jQuery可以重写为：

$(document).ready(function() {
      $('#myiframe').hide();
      $('#form').submit(function() {
          setTimeout(function() { $('#myiframe').show();}, 1000);
      });
});

由于您要提交表单，因此使用submit事件处理程序而不是click是合适的。我对jQuery的delay函数不是很熟悉，但是setTimeout设置了指定时间的延迟，应该达到你想要的效果。希望这有帮助！

Jquery正确隐藏iframe，但没有在点击时显示它

2 个答案: