Question

这是我第一次尝试使用JQuery，我正在尝试解构我在网上找到的一段代码。它适用于jsfiddle：JSFIDDLE。但是，当我尝试在浏览器中运行代码时，应该在＆＃34;创建帐户时工作的部分＆＃34;单击，不显示。我修改了代码以使用浏览器，它如下：

我的index.html文件：

import glfw
import numpy as np
import OpenGL

from OpenGL.GL import *
from OpenGL.GL import shaders, ArrayDatatype
from ctypes import sizeof, c_float, c_void_p

def main():
    width = 800
    height = 600
    title = 'Hello Triangle'

    vertex = """#version 410 core
        in vec3 aPos;
        void main() {
            gl_Position = vec4(aPos, 1.0);
        }"""
    fragment = """#version 410 core
        out vec4 FragColor;
        void main() {
            FragColor = vec4(1.0, 0.5, 0.2, 1.0);
        }"""

    if not glfw.init():
        raise TypeError('Unable to initalize glfw')

    glfw.window_hint(glfw.SAMPLES, 4)
    glfw.window_hint(glfw.CONTEXT_VERSION_MAJOR, 4)
    glfw.window_hint(glfw.CONTEXT_VERSION_MINOR, 1)
    glfw.window_hint(glfw.OPENGL_PROFILE, glfw.OPENGL_CORE_PROFILE)
    glfw.window_hint(glfw.OPENGL_FORWARD_COMPAT, True)
    glfw.window_hint(glfw.OPENGL_DEBUG_CONTEXT, True)

    window = glfw.create_window(width, height, title, None, None)
    if not window:
        raise TypeError('Unable to create the window')
    glfw.make_context_current(window)
    glfw.set_framebuffer_size_callback(window, framebuffer_size)

    verts = np.array([[-0.5, 0.5, 0.0], [-0.5, -0.5, 0.0], [0.5, -0.5, 0.0], [0.5, 0.5, 0.0]], dtype=np.float)
    indices = np.array([[0, 1, 3], [3, 1, 2]], dtype=np.uint)

    vertex_shader = glCreateShader(GL_VERTEX_SHADER)
    glShaderSource(vertex_shader, vertex)
    glCompileShader(vertex_shader)

    fragment_shader = glCreateShader(GL_FRAGMENT_SHADER)
    glShaderSource(fragment_shader, fragment)
    glCompileShader(fragment_shader)

    shader_program = glCreateProgram()
    glAttachShader(shader_program, vertex_shader)
    glAttachShader(shader_program, fragment_shader)
    glLinkProgram(shader_program)

    glDeleteShader(vertex_shader)
    glDeleteShader(fragment_shader)

    vao_id = glGenVertexArrays(1)
    vbo_id = glGenBuffers(1)
    ebo_id = glGenBuffers(1)

    glBindVertexArray(vao_id)

    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ebo_id)
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, indices, GL_STATIC_DRAW)
    #glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0)

    glBindBuffer(GL_ARRAY_BUFFER, vbo_id)
    glBufferData(GL_ARRAY_BUFFER, verts, GL_STATIC_DRAW)
    glVertexAttribPointer(0, 3, GL_FLOAT, False, 0, None)
    glEnableVertexAttribArray(0)

    #glBindBuffer(GL_ARRAY_BUFFER, 0)

    #glBindVertexArray(0)

    while not glfw.window_should_close(window):
        glClearColor(0.2, 0.3, 0.3, 1.0)
        glClear(GL_COLOR_BUFFER_BIT)

        glUseProgram(shader_program)
        glBindVertexArray(vao_id)
        glEnableVertexAttribArray(0)
        #glDrawArrays(GL_TRIANGLE_STRIP, 0, 4)
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0)
        glBindVertexArray(0)

        glfw.swap_interval(1)
        glfw.swap_buffers(window)
        glfw.poll_events()

    glfw.destroy_window(window)
    glfw.terminate()

def framebuffer_size(window, width, height):
    glViewport(0, 0, width, height)


if __name__ == '__main__':
    main()

我的script.js文件：

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js" ></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>

 <body>

 <div class="login-page">
 <div class="form">
   <form class="register-form">
     <input type="text" placeholder="name"/>
     <input type="password" placeholder="password"/>
     <input type="text" placeholder="email address"/>
     <button>create</button>
     <p id="message">Already registered? <a href="#">Sign In</a></p>
   </form>
   <form class="login-form">
     <input type="text" placeholder="username"/>
     <input type="password" placeholder="password"/>
     <button>login</button>
     <p id="message">Not registered? <a href="#">Create an account</a> </p>
   </form>
 </div>
 </div>
 </body>

所有文件都在同一目录中。关于可能出错的任何想法？

Answer 1

在文档完全解析之前，您正在标题中运行Javascript，因此您添加的处理程序不会附加到任何内容。为脚本提供defer属性，以便在解析完所有内容后加载它：

<script type="text/javascript" src="script.js" defer></script>

或将脚本放在最底层：

<script type="text/javascript" src="script.js" ></script>
</body>

Answer 2

像这样写你的代码，它会起作用。我在jsfiddle上修改你的代码，检查https://jsfiddle.net/xeyaaqte/7

$(function () {
    $('.message a').click(function (e) {
        e.preventDefault();
        alert("test")
        $('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
    });
});

jquery无法在浏览器中工作

2 个答案: