javascript - jQuery 测试图像是否具有此扩展名，否则尝试下一个

Question

我有一个下拉框，其中包含一组图像选项。每个图像在数据库中都有一个 id。图片位于 foo/images/中，并以它们在数据库中的 ID 命名(21.gif、32.png 等)。我遇到的问题是测试看看哪个扩展有效并使用那个。到目前为止，这是我的代码，我最近添加了 $.get(lnk) 部分作为一个错误的尝试，我是 Jquery 的新手。我的思考过程是，如果它是正确的扩展，它会返回 true 并且没问题，如果它失败了，让它重复直到它返回 true。有什么办法吗？像我五岁一样解释

    <SELECT NAME=IMG1 onchange=\'
  this.form.SIGN_NFPA.selectedIndex = 0;
  var id = this.options[this.selectedIndex].value
  var exts = ["png", "gif", "jpg", "jpeg"];
  var count = 0;
  var lnk = (id) ? "foo/images/"+id+"."+exts[count] : "blank.gif";
  window.document.IMG1.src = lnk;
  $.get(lnk)
    .done(function() {
      return true;
      }).fail(function() {
      count = count + 1;
      lnk = (id) ? "foo/images/"+id+"."+exts[count] : "blank.gif";
      })
  return true;
\'>

Answer 1

我对代码进行了注释，以帮助提高它的可读性。

$( "#select" ).on( "change", function () {
    // grab the value for the select box
    var val = $( this ).val();
    // file extensions
    var exts = [ "gif", "png", "jpg", "jpeg" ];
    // set img = false, used to detect if img exists.
    var img = false;
    // set i = 0, stops the while looping forever
    var i = 0;

    var url;

    // while image is false and there are more extensions to try
    while ( !img && i < exts.length ) {
        // set the url
        url = "foo/images/" + val + "." + exts[ i ];
        // build and send a request to see i the image exists.
        var req = new XMLHttpRequest();
        req.open( 'GET', url, false );
        req.send();
        // set img to the request status
        img = req.status == 200;
        // add 1 to i
        i++;
    }
    // if no url, set url to "blank.gif"
    url = img ? url : "blank.gif";

    // set the image src attribute.
    $( "#" + val ).attr( "src", url );
} );

希望对您有所帮助。