Javascript功能改變Div風格

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時，它會偏離中心。 我想將它設置為<div id='notes_number' style='right: 30px;'></div>只要數字超過9。

我遇到的問題是我不知道如何將數字轉換成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');

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;
}