Question

我能够在顶部打印一条消息，但css无法正常工作。我希望它看起来像这样，放在底部：

此外，这是一个错误消息，我希望颜色为红色并显示4000毫秒，否则如果成功，我希望它是绿色并显示1000毫秒。如果通知栏已经显示，我想将通知栏切换到新通知栏。

到目前为止的代码：

function error(msg) {
    $('<div/>').prependTo('body').addClass('#notify-error').html(msg).slideDown();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('#notify-success').html(msg).slideDown();
}


    $('#notify-error').click(function () {
        $(this).slideUp().empty();
    });

    $('#notify-success').click(function () {
        $(this).slideUp().empty();
    });

error('Error!');
success('Success!');

/* css: */

     #notify-success {
        position:relative;
        width:100%;
        background-color:green;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
    }
    
     #notify-error {
        position:relative;
        width:100%;
        background-color:red;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsfiddle

Answer 1

.addClass()为元素添加类，因此您必须更改 CSS选择器：

更改 CSS ：

#notify-success{...} -> .notify-success{...}
#notify-error{...} -> .notify-error{...}

JS ：

.addClass('#notify-success') -> .addClass('notify-success')
.addClass('#notify-error') -> .addClass('notify-error')

JSFiddle

Answer 2

试试这个我在JS和CSS进行了一些更改。

在你的js中你添加了一个#的类，例如addClass('#notify-error')表示id，所以我将它从JS函数error(msg)和success(msg)

/* JS */

    function error(msg) {
        $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown();
    }
    
    function success(msg) {
        $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown();
    }
    
    
        $('#notify-error').click(function () {
            $(this).slideUp().empty();
        });
    
        $('#notify-success').click(function () {
            $(this).slideUp().empty();
        });
    
    
    error('Error!');
    success('Success!');

/* CSS */

    .notify-success {
        position:relative;
        width:100%;
        background-color:green;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
    }
    
     .notify-error {
        position:relative;
        width:100%;
        background-color:red;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查看您的UPDATE FIDDLE

Answer 3

从addclass中删除“＃”char。

function error(msg) {
    $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown();
}

另外在css中更改此

#notify-error and  #notify-success

到这个

.notify-error and  .notify-success

更新：

你可以通过修复这部分代码来实现第二部分：

function error(msg) {
    $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown(4000);
    $('.notify-success').hide();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown(1000);
    $('.notify-error').hide();
}

Answer 4

您正在尝试为问题

添加样式

试试这个：

/* JS */
        function error(msg) {
         $('<div>').prependTo('body').addClass('notify-error').html(msg).slideDown();
          }

             function success(msg) {
            $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown();
         }


         $('body').on('click','.notify-error',function () {
              $(this).slideUp().empty();
          });

           $('body').on('click','.notify-success',function () {
             $(this).slideUp().empty();
          });


        error('Error!');
        success('Success!');

/* CSS */

    .notify-success {
      position:relative;
			width:100%;
			background-color:green;
			height:30px;
			color:white;
			display:none;
			text-align:center;
			padding:5px;
			font-size:2em;
			line-height:1em;
			font-family: Arial, sans-serif;
			border:2px solid #666;
			cursor:pointer;
		}

		.notify-error {
			position:relative;
			width:100%;
			background-color:red;
			height:30px;
			color:white;
			display:none;
			text-align:center;
			padding:5px;
			font-size:2em;
			line-height:1em;
			font-family: Arial, sans-serif;
			border:2px solid #666;
			cursor:pointer;
		 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

当您在此行中添加class属性时$('<div/>').prependTo('body').addClass('#notify-error').html(msg).slideDown();您不应该写'＃'。在将{CSS}从$('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown();更改为#notift-error之后，对于notify-success，这应该是.notify-error。在HTML中只是声明属性及其值，选择符'＃'表示ID和'。' for class用于在CSS或JavaScript中选择它们。

创建一个通知栏

5 个答案: