Jquery Classes and InnerHtml

本文关键字：InnerHtml and Classes Jquery 更新时间：2023-09-26

所以我正在做的是从Mysql数据库中提取电池电压和电池状态处理data.php中的数据并将其放入Json数组中，这一切都很好。当我到达Javascript端时，我被卡住了。

2的问题:问题1:如何插入值到id电压在html不删除跨度?

HTML代码:

        <div id="voltState" class="tile-box bg-green">
            <div class="tile-header">
                Battery Status
                <div class="float-right">
                    <i class="glyph-icon icon-bolt"></i>
                    Green
                </div>
            </div>
            <div class="tile-content-wrapper">
                <i class="glyph-icon icon-database"></i>
                <div id="voltage" class="tile-content">
                    <span>volts</span>
                </div>
            </div>
        </div>

问题2:class="tile-box bg-green">我想从Javascript中替换var状态，所以它看起来像class="tile-box bg-(status var here)">

    $(document).ready(function() {
        sensorData();
    });
    function sensorData(){
        $.ajax({
            type:'GET',
            url:"data.php",
            data:"json",
            success:function(sensor) {
                //document.write(sensor);
                var volt = sensor[0];
                var status = sensor[1];
                var date = sensor[2];
                document.getElementById('voltage').innerHTML = (volt);
                $("#voltState").toggleClass('bg-green bg-(STATUS VAR HERE??)');
            },
        dataType:'json' 
        });
    }
    setInterval(sensorData, 3000);

您可以使用$("#voltage").append(volt)或$("#voltage").prepend(volt)基于如果您想要的跨度之前或之后的值。在这种情况下，我假设你想要伏特之后的跨度，这样你就可以使用第二个代码。如果你想在一个新的跨度内的值，你也可以使用:

$(" #电压").prepend($(" ")。text (volt));

您可以将先前的状态值存储在一个变量中，例如pastStatus。一旦你设置了

$("#voltState").removeClass('bg-'+pastStatus).addClass('bg-'+status); pastStatus = status

注意: toggleClass在你想要在添加和删除同一个类之间切换时使用。它不能在这种情况下使用，因为您想要添加一个类并删除另一个类。

document.getElementById('voltage').appendChild(volt);

或

document.getElementById('voltage').innerHTML = '<span>'+volt+'</span>';