个人中心
gpt4 book ai didi

php - jquery 追加样式表和类函数

转载 作者：太空宇宙 更新时间：2023-11-04 14:55:37 25 4
gpt4 key购买 nike

相当新，从头开始工作 PHP/mySQL 登录页面并在我学习的过程中添加功能..

最近添加的是 ajax 凭据验证，成功后将表单的 .html() 替换为成功消息，然后是添加注销按钮的 .append() 到导航栏，所有这些都没有页面刷新.

上述过程功能完美，但是当我 .append() 将注销链接作为 

<div class="nav_button">

它不会继承 .nav_button 样式表中的任何类 CSS，也不会触发我链接到该类的 javascript 悬停事件

谁能给我解释一下这个问题的原因，以及解决这个问题的方法？代码如下，也欢迎批评代码，学习中!

谢谢。

样式.css

.nav_button {
display: inline;
border: 1px solid grey;
padding: 5px 5px 5px 5px;
margin: 3px 3px 3px 3px;
}

导航菜单.php

<?php
// ---------------------------------------- Navigation bar ----------------------------------------
// Generate the navigation menu
$navbar = "";
$navbar = '<div id="nav_menu"><hr /><div id="nav_links">' . '<div class="nav_button"><a href="index.php">Home</a></div>' . 
    '<div class="nav_button"><a href="signupAJAX.php">Sign Up</a></div>' .
    '<div class="nav_button"><a href="loginAJAX.php">Log In</a></div>';
if (isset($_SESSION['username'])) // adds logout if logged in
{
    $navbar = $navbar . '<div class="nav_button"><a href="logout.php">Log Out <b><font color ="red">(' . $_SESSION['username'] . ')</font></b></a></div>';
}
$navbar = $navbar . '</div><hr /></div>';
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="navbutton.js"></script>

<?php
echo $navbar;
?>

导航按钮.js

$(document).ready(function()
{
$('.nav_button').css('background-color', '#d6d6d6');
});

$(function() 
// ---------------------------------------- Nav button effects ----------------------------------------
{
$('.nav_button').mouseenter(function()
{
    $(this).css('background-color','#979191');  
});

$('.nav_button').mouseleave(function()
{
    $(this).css('background-color','#d6d6d6');
});
});

登录.php

<?php
// ---------------------------------------- User login page ----------------------------------------
require_once 'startsession.php';
$page_title = 'Log In';
require_once 'header.php';
require_once 'navmenu.php';
?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="invisiblelogin.js"></script>

<?php
// Show login form if user not logged in
if (empty($_SESSION['user_id'])) 
{
?>

<html> 
    <div id="contact_form">
        <form action="" name="contact">
            <fieldset><legend>Log In Info</legend>

                <label class="error" for="username" id="username_error">Invalid username/password combination.</label>
                <font color="red"><div id="Info"></div></font>

                <table>
                    <tr><td><label for="username" id="username_label">Username:</label>
                    <input type="text" id="username" name="username" value="" class="text-input" /></td>
                    <td><label class="error" for="username" id="username_error2">Enter your username.</label></td></tr>

                    <tr><td><label for="password" id="password_label">Password:</label>
                    <input type="password" id="password" name="password" value="" class="text-input" /></td>
                    <td><label class="error" for="password" id="password_error">Enter your password.</label></td></tr>
                </table>

                <input type="submit" name="submit" class="button" id="submit_btn" value="Sign Up" />

            </fieldset>
        </form> 
    </div>
</html>

<?php
}
else 
{
    // Shown if user is logged in
    echo('<p class="login">You are logged in as <b><font color ="red">' . $_SESSION['username'] . '</b></font>.</p>');
}
require_once 'footer.php';
?>

隐形登录.js

$(document).ready(function() 
{
$('.error').hide(); 
$('#Info').hide();  
$('#loggedin').hide();
});

// ---------------------------------------- Verifies form fields have entries ----------------------------------------
$(function() 
{
$('.error').hide();
$(".button").click(function() 
{
    $('.error').hide();
    var username = $("input#username").val();
    var password = $("input#password").val();       

    if (username == "" || password == "") 
    { 
        if (username == "") 
        {
            $("label#username_error2").show();
            $("input#username").focus();
        }
        if (password == "") 
        {
            $("label#password_error").show();
            $("input#password").focus();
        }
        return false;
    }

    // Validation function
    if (username.length > 0 && password.length > 0) 
    {
        $.post("logincheck.php", {
        username: $('#username').val(),
        password: $('#password').val() },
        function(response) 
        {
            var valid = unescape(response);
            if (valid == 0) 
            {
                $("label#username_error").show();
            }

这些行是 invisiblelogin.js 中的附加

            else 
            {
                $('#contact_form').html('<p class="login">You are logged in as <b><font color ="red">' + username + '</b></font>.</p>');
                $('#nav_links').append('<div class="nav_button"><a href="logout.php">Log Out <b><font color ="red">(' + username + ')</font></b></a></div>');
            }
        });
        return false;
    }           
    return false;
});
});

最佳答案

您的悬停事件未触发，因为您在页面上存在 .nav_button 之前绑定(bind)它们。试试这个:

$(document).on('mouseenter', '.nav_button', function() {
    $(this).css('background-color','#979191');  
}).mouseleave(function() {
    $(this).css('background-color','#d6d6d6');
});

根据 CSS 属性，不要在 DOM 就绪函数中设置它们，在实际 CSS 文件中指定背景颜色。任何具有 nav_button 类的附加元素都将获得该样式。

关于php - jquery 追加样式表和类函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17005133/

25 4 0
文章推荐： C++局部变量内存管理
文章推荐： java - 读取 PNG 图像尺寸时出错
文章推荐： c++ - 我如何强制客户端调用显式专用模板而不是主模板？
文章推荐： java - 当老一代的jvm超过某个比例时如何自动转储内存？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com