jQuery変数に基づく画像を表示

Question

XMLファイルを読み込んでいくつかの値から変数を作成する次のコードがあります。

$(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> 

ではなく、変数を出力するのである、変数に基づいて画像を表示これは私のjQueryのです値。変数値が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") 
    })); 
}); 

、2つのコール間の違いに対応するためにFunction.prototype.bind()の使用に注意してください。

<img>要素をハードコードし、次にsrcプロパティを変更する方がよい場合があります。