Javascript JQuery Get Number 和显示图标

Javascript JQuery Get Number and display icon

本文关键字：显示 显示图 图标 Number JQuery Get Javascript      更新时间：2023-09-26

我对javascript很陌生，所以请裸露。 我正在尝试从文件中获取"未读通知"的数量，那么如果数字高于 0，我希望它在div 内显示图像。 如果没有，那么我希望它保持空白。

这是我到目前为止所拥有的，现在它在div 中显示通知的数量。 我不希望它那样做。 我只希望它在未读通知超过 0 时显示一个图标。

这是我到目前为止所拥有的：

$(document).ready(function(){
   $("#notes_number").load("getnumber.php");
   var value = $("#notes_number").load("getnumber.php");
   if(value > 0){
    //display icon...not sure the javascript code for this.
    }
});

您可以通过多种方式显示图标。这完全取决于您的HTML结构。

假设你有一个标题栏和一个带有类.messages的div，你可以像这样更新它：

$("#header .messages").text(value + " new messages waiting.").addClass("new");

这将更新消息框中的文本，并为其提供一个new类，该类可以具有与之关联的样式，以将图标显示为背景图像，如下所示：

.messages.new {
    background-image: url(images/new_icon.jpg);
    background-repeat: no-repeat;
    background-position: left center;
}

但是，您首先需要纠正对load()的错误使用。我建议在 complete 上使用带有回调函数的 get()，假设"getnumber.php"只返回一个字符串。

load()不

返回值，它将响应加载到 DOM 元素中，您想改用$.get()：

$(document).ready(function(){
    $.get('getnumber.php',function(data){
        if(parseInt(data,10) > 0){
            //show icon
            $("#notes_number").html('icon here');
        }
    });
});
相关文章：