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来选择适当宽度来简化问题的解决方案;适当的大小将位于sizes数组的第一个位置：

$(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);
  });
}

我们可以在您的on ready处理程序之外移动resize函数定义，以使其可全局访问。我们可以省去使用split来查找最后/之后的任何内容（图像名称）。我们可以避免使用带有breaks的循环和if语句，这些语句往往难以阅读和维护。

Answer 2

您在Sizes使用小写s引用sizes[i]数组，其中sizes未定义

Answer 3

我希望这可以解决你的问题：

$(window).on('resize', function (e) {
  var img = $('img.resizable');
  var width = $(window).innerWidth();
  var Sizes, sLength, i;
  img.each(function (index, element) {
    var name = element.getAttribute('src').split('/') // Split is a native javascript function, which 'splits' the string into an array with the components
    Sizes = [2880, 1920, 1000, 600].sort((a, b) => {return a - b;});
    sLength = Sizes.length;
    for (i = 0; i < sLength; i++) {
      if (width <= Sizes[i]) {
        $(element).attr('src', 'images/' + Sizes[i] + '/' + name.pop())
        console.log('New src for image N. ' + index + ' is: ' + $(element).attr('src'));
        break;
      }
    }
  });
});

$(function () {
  // simulate a resize on dom ready: for testing
  $(window).trigger('resize');
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<img class="resizable" src="images/100/nameofimage1.png">
<img class="resizable" src="images/100/nameofimage2.png">

Answer 4

这有点冗长，并且以你使用的最大值开始跟随你的数组而不是硬编码对于＆＃34;最大的＆＃34; （最后）有条件的。在部署之前删除控制台日志。

$(document).ready(function() {
  window.onresize = resize;
  var sizes = [2880, 1920, 1000, 600];

  function resize() {
    console.log('si');
    var img = $('img.resizable');
    var width = $(window).innerWidth();
    img.each(function(index, element) {
      var name = element.src.split('/');
      name = name[name.length - 1];
      var setto = 0;
      for (var i = sizes.length; i >= 0; i--) {
        console.log(i,width,setto, sizes[i]);
        if (width <= sizes[i]) {
          setto = sizes[i];
          break;
        }
      }
      setto = width >= sizes[0] ? sizes[0] : setto;
      $(element).attr('src', 'images/' + setto + '/' + name);
    });
  }
  resize();
});

Answer 5

你可能想要这样的东西：

sort_array_small_to_large(Sizes)

for (i = 0; i < Sizes.length; i++)
{
   if (width <= Sizes[i])
   {
      size = Sizes[i]
      break
   }
}
$(element).attr('src', 'images/' + size + '/' + name[name.length - 1])

设置数组以处理大小条件

5 个答案: