Question

我有一个javascript脚本，它从php文件中获取通知的数量，然后将数字显示在代码中的div中。

<script>
//DISPLAY NUMBER OF UNREAD NOTIFICATIONS AND UPDATE EVERY 5 SECONDS
window.setInterval(function(){

   $("#notes_number").load("getnumber.php");

}, 5000);

//WHEN THE BUTTON IS PRESSED THIS HAPPENS
function toggleDiv(divId) {
   $("#"+divId).show();
//GET THE NOTIFICATIONS 
$(document).ready(function(){
   $("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});

//RESET THE NUMBER OF UNREAD NOTIFICATIONS
$(document).ready(function(){
   $("#notes_number").load("getnumber.php");
});


}

</script>

<div id='notes_number'> </div>

数字是钟形图标，当数字超过9时，它会偏离中心。每当数字超过9时，我都希望将其设置为<div id='notes_number' style='right: 30px;'></div>。

我遇到的问题是我不知道如何将数字转换成php变量，所以我可以像这样制作if else语句：

if ($thenumber <= "9") {
echo "<div id='notes_number'> </div>";
}
else {
echo "<div id='notes_number' style='right: 30px;'></div>";
}

最近使用的代码：

window.setInterval(function(){
    $("#notes_number").load("getnumber.php");

    var value = parseInt($('#notes_number').text());

    if(value > 9){
    $('#notes_number').css('right','30px');
    }
}, 5000);

Answer 1

在铃声里面的html总是只放<div id='notes_number'></div>然后你可以在你的javascript中加载数字并通过jquery添加样式（如果数字超过9），如下所示：$('#notes_number').css('right','30px'); < / p>

Answer 2

这可以在JavaScript层中解决。不要使用.load，而是尝试使用.get检查值，然后相应地指定样式。

window.setInterval(function(){

    $.get("getnumber.php", function(data) {

        $("#notes_number").val(parseInt(data,10));

        if(parseInt(data,10) > 9) {
            $("#notes_number").css('right','30px');
        } else {
            $("#notes_number").css('right','0');
        }

    });

}, 5000);

Answer 3

您可以使用相同的标记：

<div id='notes_number'> </div>

然后在你的jquery中你可以获取值：

var value = parseInt($('#notes_number').text());

并添加一个类，如果它超过9

if(value > 9){
    $('#notes_number').addClass('largeNumber');
}

让CSS处理样式，而不是通过JS使用内联样式：

.largeNumber{
    right: 30px;
}

Javascript功能改变Div风格

3 个答案: