基于jQuery变量显示图像

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属性。