Question

我在xml feed中使用jQuery到Ajax，如下所示：

status>
<script id="tinyhippos-injected"/>
<serverinfo>
<hostname>harvey</hostname>
<external>
http://stats.pingdom.com/3tltrr03waho/1435422/history
</external>
</serverinfo>
<host>
<status>OK</status>
</host>
<service>
<http>OK</http>
<ftp>OK</ftp>
<mysql>OK</mysql>
<pop>OK</pop>
<imap>OK</imap>
<smtp>OK</smtp>
<load>OK</load>
</service>
</status>

使用这个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 load = $(xml).find('load').text();

          if(http == 'OK') {
            $(".http img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(http == 'WARNING') {
            $(".http img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(http == 'CRITICAL') {
            $(".http img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(ftp == 'OK') {
            $(".ftp img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(ftp == 'WARNING') {
            $(".ftp img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(ftp == 'CRITICAL') {
            $(".ftp img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(mysql == 'OK') {
            $(".mysql img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(mysql == 'WARNING') {
            $(".mysql img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(mysql == 'CRITICAL') {
            $(".mysql img").attr("src","http://placehold.it/40/ff0000/000000");
          }

          if(load == 'OK') {
            $(".load img").attr("src","http://placehold.it/40/00cc33/ffffff");
          }
          else if(load == 'WARNING') {
            $(".load img").attr("src","http://placehold.it/40/ff6600/000000");
          }
          else if(load == 'CRITICAL') {
            $(".load img").attr("src","http://placehold.it/40/ff0000/000000");
          }

        }
    });
});

要交换此HTML中的图片src

<div class="container">
<h3>Server Status Widget</h3>
  <h4>Hosting Server</h4>

<p><strong>HTTP: </strong><span class="http"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>FTP: </strong><span class="ftp"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>MySQL: </strong><span class="mysql"><img src="http://placehold.it/40" alt="" /></span></p>

<p><strong>Load: </strong><span class="load"><img src="http://placehold.it/40" alt="" /></span></p>

</div>

这一切都很有效，但我对jQuery没有经验，我确信代码可以改进并减少重复性。我的问题是，我可以减少if / else if语句的数量，这样我就不需要遍历每个变量吗？

感谢您的帮助

麦克

Answer 1

~~假设只有三条状态消息： OK，WARNING和CRITICAL。~~。带有图像URL的UNKNOWN状态也可以添加到图像对象中。

图像URL可以存储在一个对象中，状态消息为key，URL为value。然后可以动态使用密钥。

$(document).ready(function () {
    // Define images object here
    var images = {
        OK: 'http://placehold.it/40/00cc33/ffffff',
        WARNING: 'http://placehold.it/40/ff6600/000000',
        CRITICAL: 'http://placehold.it/40/ff0000/000000'
    };

    ....
        success: function (xml) {
            var http = $(xml).find('http').text(),
                ftp = $(xml).find('ftp').text(),
                mysql = $(xml).find('mysql').text(),
                load = $(xml).find('load').text();

            // Use the status message to get the image URL from object.
            $('.http img').attr('src', images[http]);
            $('.ftp img').attr('src', images[ftp]);
            $('.mysql img').attr('src', images[mysql]);
            $('.load img').attr('src', images[load]);
        }
});

Answer 2

这就是我最终的结果，为图像添加了更改alt：

{{1}}

改进jQuery以减少重复

2 个答案: