javascript - 单击功能 "this"不起作用

Question

我在 http://www.red-team-design.com/cool-notification-messages-with-css3-jquery 找到了一个脚本，但我的代码有问题

我想让它 1) 点击时隐藏，2) 15 秒后隐藏

HTML:

<div class="warning message">It is currently past 4pm. Any orders placed between now and midnight will not be placed until 4pm tomorrow.</div>

Javascript:

var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
    var messagesHeights = new Array(); // this array will store height for each
    for (i=0; i<myMessages.length; i++){
        messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
        $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
    }
}
function showMessage(type){
    hideAllMessages();
    $('.'+type).animate({top:"0"}, 500);
    setTimeout(function(){
        $('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
        hideAllMessages();
        },15000);
}
$(document).ready(function(){
    // Initially, hide them all
    hideAllMessages();
    // Show message
    for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}         
    // When message is clicked, hide it
    $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500);
    });
});

这是由 php 执行的，我只是使用 php 将以下行插入到我的代码中:

<script type='text/javascript'>
    $(document).ready(function(){
        showMessage(warning)
    });
</script>​

现在，由于某种原因，当我单击它时，div 不会隐藏，并且在指定的 15 秒后它也不会隐藏。

我在 http://jsfiddle.net/dpdesignz/yTaRa/1/ 创建了一个 JSFiddle如果有人介意看看可能出了什么问题吗？我感觉它与 PHP echo 执行的部分有关，所以有人知道另一种方法可以做到这一点吗？

Answer 1

您的代码中有一些错误。

第一个警告未定义

指的是以下内容:

$(document).ready(function(){
    showMessage(warning) 
});

warning 不是一个设置变量。也许您的意思是这是'警告'。

其次showMessage未定义

showMessage('warning');

这在定义 showMessage() 函数之前调用。您可以通过将此调用移动到另一个 $(document).ready()

来解决此问题

http://jsfiddle.net/yTaRa/5/

var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
    var messagesHeights = new Array(); // this array will store height for each
    for (i=0; i<myMessages.length; i++){
        messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
        $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
    }
}
function showMessage(type){
    hideAllMessages();
    $('.'+type).animate({top:"0"}, 500);
    setTimeout(function(){
        $('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
        hideAllMessages();
        },15000);
}
$(document).ready(function(){
    // Initially, hide them all
    hideAllMessages();
    // Show message
    for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}         
    // When message is clicked, hide it
    $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500);
    });
    showMessage('warning');
});
​