时间戳

首页 > 解决方案 > 如何缩短jQuery中的多个if条件？

javascript - 如何缩短jQuery中的多个if条件？

问题描述

我一直在将图像放入我的元素 img src。我有 4 种文件类型要检查，.png, .jpg, .jpeg, .gif. 我想要实现的是，每当服务器中的文件类型不可用时，去检查其他文件类型并替换<img src="">.

例如，如果.png文件在服务器中不可用，则检查是否.jpeg可用，如果仍然不可用，请检查.jpg等等。

如果.jpg在服务器上不可用，则检查.jpeg是否可用，如果不可用，请检查.png等等。

if-else我当前的代码仅包含 2 个条件，我正在考虑如果要放置其他文件类型，如何缩短我的代码。

$('img').one('error', function() {
                if(this.src.includes(".png")){
                    this.src = this.src.replace(".png", ".jpeg")
                }else if(this.src.includes(".jpg")){
                    this.src = this.src.replace(".jpg", ".png")
                }
             });

我可以使用 lodash，但我不想安装另一个第三方包。我仍在考虑一个 switch case 语句，但如果一个if-else语句会做，宁愿用它。谢谢！

标签： javascriptjquery

解决方案

一个对象可以用作一个替换的查找

var replacements = {
  "png": "jpeg",
  "jpg": "png"
};
var reImgs = new RegExp(`\\.(${Object.keys(replacements).join('|')})`);

function cleanUp(str) {
  return str.replace(reImgs, function(_, match) {
    var replacement = replacements[match] || match;
    return `.${replacement}`;
  });
}
console.log(cleanUp("/foo/bar.png"));
console.log(cleanUp("/foo/bar.jpg"));
console.log(cleanUp("/foo/bar.gif"));


$('img').one('error', function() {
  var src = this.src;
  const updated = cleanUp(src);
  if (updated !== src) {
    console.log("trying", updated);
    this.src = updated;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="foo.png" />

推荐阅读