Question

我正在制作一个有留言簿页面的网站。在页面上有一个对话区域，在顶部有一个链接，上面写着“点击发布”。我尝试使用jquery使它显示允许您添加到页面的表单，但我似乎无法使其工作。我已经能够使用普通的javascript工作，但没有动画，所以我尝试使用.slideToggle（）;但没有成功。有很多代码，我不知道罪魁祸首在哪里，所以我很抱歉，如果真的很长。脚本标签后面的函数是我原来使用的函数。

万一这是一个愚蠢的错误，我不知道JS / Jquery。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Guestbook -- My Coding</title>
<link rel="stylesheet" href="/css/styles.css" type="text/css">

<script type="text/javascript">
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }

    $("#display_post").click(function(){
    $("#post_new_table").slideToggle();
    }); 
</script>
</head>
<body>
<div id="wrapper">

    <?php
        $title = '<a href="/guestbook/adminlogin.html" style="color: white; text-decoration: none; cursor: text;">guestbook</a>';
        $desc = 'hassle-free conversations';
        require('../includes/header.html');


        //connect to DB.
        //REMOVED THIS PART
        /**************************************************************************/
        //form to add new post.
        if (isset($_POST['n'])) {
            echo ($_POST['n']);
        }
        else {};
    ?>
        <div id="post_new">
        <div id='display_post' onclick="">Click to post</div>
        <form action="/guestbook/add_post_gb.html" method="POST">
        <table id="post_new_table">
        <tr>
            <td>Name<red>*</red>:</td>
            <td><input type='text' name='name' style='width: 400px;' /></td>
        </tr>
        <tr>
            <td>E-Mail<red>*</red>:</td>
            <td><input type='text' name='email' style='width:400px;' /></td>
        </tr>
        <tr>
            <td>Message<red>*</red>:</td>
            <td><textarea name='message' style='width: 400px; height: 100px;'></textarea></td>
        </tr>
        <tr>
            <td>3*2=<red>*</red></td>
            <td><input type='text' name='human_test' style='width: 400px;' /></td>
        </tr>       
        <tr>
            <td></td>
            <td><input type='submit' name='postbtn' value='POST' />
        </tr>


        </table>
        </form>     
        </div> 

    <?php   

        //print_r($_POST);
        /**************************************************************************/

        What was here just outputted the already made comments.


</div>
<div style="position: fixed; right: 8px; bottom: 3px;"><a href="#">^Back to top^</a></div>
</body>

Answer 1

您正在将click事件附加到尚不存在的元素，您可以将JavaScript移动到＃post_new_table元素下面，也可以将脚本放在$（document）.ready（）调用中。 / p>

$(document).ready(function(){
    $("#display_post").click(function(){                
        $("#post_new_table").toggle();
    }); 
});

Answer 2

将js包装在一个函数中，如下所示：

<script type="text/javascript">

$(function(){
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }

    $("#display_post").click(function(){
    $("#post_new_table").slideToggle();
    }); 
});
</script>

Answer 3

根据JQuery api doc，这应该有效：

$("#display_post").click(function(){
  $("#post_new_table").toggle();
});

我正在尝试使用javascript单击按钮时进行表单显示

3 个答案: