javascript - 设置数组来处理大小条件

Question

我有以下代码。我正在处理一个数组。我发现了一个 javascript 数组指令。如果这是错误的，我很乐意帮助您找出是否有 jQuery 版本。

当我尝试实现 if() 时，我的问题就出现了。和else if()数组的条件。我正在使用i (变量)对数组中的项目进行计数。

它表示行上存在一个问题，内容为 else if(width <= Sizes[i]) { $(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1]) }

此外，该阵列似乎根本无法工作。它拉取默认图像。

我可能做错了。我这样做是为了弄清楚数组是如何工作的，并将它们实现到我已有的代码中。有人可以帮忙解决这个问题吗？它不起作用。该代码在没有数组的情况下也能完美运行，因此它是数组中的东西。

$(document).ready(function() {
  window.onresize = resize;
  function resize() {
    var img = $('img.resizable');
    var width = $(window).innerWidth();
    var Sizes, sLength, i;
    img.each(function(index, element) {
      var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components
      Sizes = [2880, 1920, 1000, 600];
      sLength = Sizes.length;
      for (i = 0; i < sLength; i++) {
        if (i == 0) {
          if (width <= Sizes[i]) {
            $(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1])
          }
        }
        if (i > 0) {
          else if (width <= Sizes[i]) {
            $(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1])
          }
        }
      } else {
        $(element).attr('src', 'images/2880/' + name[name.length - 1])
      }
    })
  }
  resize();
});

我尝试转换的实际脚本

$(document).ready(function() {
window.onresize = resize;

function resize() {

    var img = $('img.resizable');
    var width = $(window).innerWidth();


    img.each(function(index, element) {

        var name = element.src.split('/') // Split is a native javascript function, which 'splits' the string into an array with the components

        if(width <= 600) {
            $(element).attr('src', 'images/600/' + name[name.length - 1]) // This name[name.length -1] trick is being used to select the 'last value in the string' based on the length of the string.
        }
        else if(width <= 1000) {
            $(element).attr('src', 'images/1000/' + name[name.length - 1])
        }
        else if(width <= 1920) {
            $(element).attr('src', 'images/1920/' + name[name.length - 1])          
        }        
        else {
            $(element).attr('src', 'images/2880/' + name[name.length - 1])          
        }

    })

}

resize();

});

Answer 1

这里有一个解决方案，通过使用Array#filter来选择适当的宽度来简化问题；适当的尺寸将位于尺寸数组的第一个位置:

$(document).ready(function() {
  window.onresize = resize;
  resize();
});
function resize() {
  // use $.each to iterate over each element
  $('img.resizable').each(function(index, element) {   
    // get the image name directly
    var name = element.src.substring(element.src.lastIndexOf('/'));   

    // let's whittle down sizes to *only* those that fit our screen width
    var sizes = [600, 1000, 1920, 2880].filter(function(s){ 
      return window.innerWidth < s || s == 2880;
    });
    // update the image with whatever size is in the first position
    $(element).attr('src', 'images/' + sizes[0] + name);
  });
}

我们可以将调整大小函数定义移到就绪处理程序之外，以使其全局可访问。我们可以不使用 split 来查找最后一个 / (图像名称)之后的内容。我们可以避免使用带有 breaks 的循环和 if 语句，这些语句往往难以阅读和维护。