Question

我想在第一时间道歉，问一些愚蠢的问题（对我而言不是这样），但我无法帮助它。我必须承认我不懂jQuery，但我确实对Javascript有基本的了解，而且我是一名专注的PHP开发人员。我对HTML或CSS没有任何问题。当涉及到jquery时，我迟迟没有，因为我必须遇到的截止日期，我没有足够的时间来学习它。

首先我开发了一个使用php的应用程序，并从themeforest购买了一个模板，现在它有一些漂亮而美观的javascript代码问题是我不知道如何让它工作。即使它位于我面前。这是登录页面中的代码。我想在哪里使用这个jquery

<link rel="stylesheet" type="text/css" href="css/basicblack.css" title="styles5" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/supersleight.js"></script>
<script type="text/javascript" src="js/jquery.example.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/styleswitch.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
    $(document).ready(function(){
            $(".block").fadeIn(1000);                  
            $(".msg-error").fadeIn(1000);
            $(".msg-warning").fadeIn(1000); 
            $('.msg-error').supersleight();
            $('#username').example('Username'); 
            $('#password').example('Password');
    });
/* ]]> */
</script>

现在我想在我的代码中对类msg-error和msg-warning使用fadein效果，它不起作用，这里是我用过的PHP逻辑的组合代码。

虽然有了这个，我能够得到想要的结果，如果字段为空或者用户名和密码，它会显示错误。但我无法使用那种淡化效果。我该怎么做？

<div id="wrap">
    <?php if(isset($_POST['login'])) { if( empty($_POST['username']) || empty($_POST['password'])) { ?>
    <div class="msg-error">
    <img src="images/icons/22/messagebox_warning.png" alt=""/>
    <p>Please fill in all of the fields!</p>
    </div>       
    <?php } }?> 
       <?php
       if( isset($_POST['login'])) {
       if( !empty($_POST['username']) || $_POST['password']) {
       if( !check_login($_POST['username'], $_POST['password'])) {
       ?>
       <div class="msg-error">
            <img src="images/icons/22/remove.png" alt=""/>
            <p>Wrong username or password!</p>
        </div>
       <?php } } } ?>

Answer 1

正如总理所说的那样，这些元素很可能不会被隐藏起来。请记住，如果使用CSS隐藏它们，没有JavaScript的用户将无法访问它们。你可以这样做：

<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
        $(".block").hide().fadeIn(1000);                  
        $(".msg-error").hide().fadeIn(1000);
        $(".msg-warning").hide().fadeIn(1000); 
        $('.msg-error').supersleight();
        $('#username').example('Username'); 
        $('#password').example('Password');
});
/* ]]> */
</script>

这种方法称为progressive enhancement。

Answer 2

我的猜测是这些项目没有淡入，因为它们一开始就可见。使用简单的CSS（display:none）来隐藏它们，然后jquery fadeIn调用应该在页面加载后显示它们。

<强>更新正如其他人所指出的那样，用js而不是css隐藏消息可能更好，以允许用户用javascript来查看消息。

Answer 3

我只是在这里猜测，但问题可能是，鉴于我在这里看到的内容，您的“msg-error”div已经显示，因此它们无法淡入。请尝试像这样修改你的jQuery：

$(document).ready(function(){
            $(".block").hide().fadeIn(1000);                  
            $(".msg-error").hide().fadeIn(1000);
            $(".msg-warning").hide().fadeIn(1000); 
            $('.msg-error').supersleight();
            $('#username').example('Username'); 
            $('#password').example('Password');
});

Answer 4

您可以更改这三个电话：

$(".block").fadeIn(1000);                  
$(".msg-error").fadeIn(1000);
$(".msg-warning").fadeIn(1000);

就这样：

$(".block, .msg-error, .msg-warning").hide().fadeIn(1000);

这使用multiple selector同时获取所有3个，并在{fn}淡入它们之前执行.hide()隐藏它们。这样做的好处是，如果用户已禁用JS，他们'我仍然会得到错误，只是没有褪色。

如何与PHP结合使用时激活此jquery函数

4 个答案: