Question

我有以下代码读取XML文件并从某些值创建变量。这是我的jQuery：

$(document).ready(function() {     
    $.ajax({          
        type:  'GET',
        url:   'https://status.clook.net/xml/status/harvey.xml',
        dataType: 'xml',              
        success: function(xml){
           var http = $(xml).find('http').text();
           var ftp = $(xml).find('ftp').text();
           var mysql = $(xml).find('mysql').text();
           var pop = $(xml).find('pop').text();
           var imap = $(xml).find('imap').text();
           var smtp = $(xml).find('smtp').text();
           var load = $(xml).find('load').text();

          $('.http').html(http);
          $('.ftp').html(ftp);
        }
    });

    $.ajax({          
        type:  'GET',
        url:   'https://status.clook.net/xml/status/email01.xml',
        dataType: 'xml',              
        success: function(xml){
           var ehttp = $(xml).find('http').text();
           var eftp = $(xml).find('ftp').text();
           var emysql = $(xml).find('mysql').text();
           var epop = $(xml).find('pop').text();
           var eimap = $(xml).find('imap').text();
           var esmtp = $(xml).find('smtp').text();
           var eload = $(xml).find('load').text();

          $('.ehttp').html(ehttp);
          $('.eftp').html(eftp);
        }
     });
});

然后将其与以下HTML一起使用：

<div class="container">
    <h3>Server Status Widget</h3>
    <h4>Hosting Server</h4>
    <p>
        <strong>HTTP: </strong>
        <span class="http"></span>
    </p>
    <p>            
        <strong>FTP: </strong>
        <span class="ftp"></span>
    </p>
    <h4>Email Server</h4>
    <p>
        <strong>HTTP: </strong>
        <span class="ehttp"></span>
    </p>
    <p>
        <strong>FTP: </strong>
        <span class="eftp"></span>
    </p>
</div>

我现在要做的不是输出变量，而是根据变量值显示图像。我想检查变量值是否为OK，如果是，则在范围中显示图像，然后如果变量是其他任何显示另一个图像的颜色。

例如，如果变量http的值为OK，则在.http范围内显示allgood.jpg。如果变量值不是OK，则显示notgood.jpg。

Answer 1

if (ehttp == "ok") {
 var imgsrc = '/images/' + ehttp + '.png';
 var img = document.createElement("img");
 var img.src = imgsrc;
 var target = document.querySelector('.ehttp');
 target.appendChild(img);
}

根据我对你的目标的理解，我会做那样的事情。

Answer 2

您可以使用通用showResult()函数编写类似的内容，以避免重复代码。

$(document).ready(function() {
    // Fixed data (adapt as necessary)
    var OkText = 'OK';
    var paths = {
        'goodHttp': '/path/to/good/http/image/',
        'badHttp': '/path/to/bad/http/image/',
        'goodFtp': '/path/to/good/ftp/image/',
        'badFtp': '/path/to/bad/ftp/image/'
    };
    // Generalised utility function
    function showResult(containers, xml) {
        var httpText = $(xml).find('http').text();
        var ftpText = $(xml).find('ftp').text();
        if(httpText === OkText) {
            containers.http.html('<img src="' + paths.goodHttp + '"/>');
        } else {
            containers.http.html('<img src="' + paths.badHttp + '"/>');
        }
        if(ftpText === OkText) {
            containers.ftp.html('<img src="' + paths.goodFtp + '"/>');
        } else {
            containers.ftp.html('<img src="' + paths.badFtp + '"/>');
        }
    }

    // AJAX
    $.ajax({
        'url': 'https://status.clook.net/xml/status/harvey.xml',
        'dataType': 'xml',
    }).then(showResult.bind({
        'http': $("span.http"),
        'ftp': $("span.ftp")
    }));
    $.ajax({
        'url': 'https://status.clook.net/xml/status/email01.xml',
        'dataType': 'xml',
     }).then(showResult.bind({
        'http': $("span.ehttp"),
        'ftp': $("span.eftp")
    }));
});

请注意使用Function.prototype.bind()来满足两次通话之间的差异。

更好的方法可能是对<img>元素进行硬编码，然后更改其src属性。

基于jQuery变量

2 个答案: