设置数组以处理大小条件 [英] Setting up an array to handle size conditions

问题描述

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

I've got the following code. I am working on an array. I found a javascript array instructions..if this is wrong, I'd love help to find out if there is a jQuery version of this.

当我尝试对数组实现if()和else if()条件时，我的问题开始起作用.我正在使用i(变量)对数组中的项目进行计数.

My issue comes into play when I am trying to implement an if() and else if() conditions to the array. I am using i (variable) to count items in array.

这就是说在读取else if(width <= Sizes[i]) { $(element).attr('src', 'images/' + Sizes[i] + '/' + name[name.length - 1]) }

另外，看来该阵列根本无法工作.它拉出默认图像.

Also, it appears that the array isn't working at all. Its pulling the default image.

我可能做错了.我这样做是为了弄清楚数组是如何工作的，并将其实现为我已经拥有的代码.有人可以帮忙解决这个问题吗?它不起作用.该代码在没有数组的情况下也可以完美地工作，因此它在数组中是存在的.

I am probably doing this wrong. I am doing this trying to figure out how arrays work and implementing them into a code I already have. Can someone please help solve this? It isn't working. The code works perfectly without the array, so it is something in the array.

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

});

推荐答案

这有点冗长，遵循您的数组，该数组以我使用的最大值开头，而不是对最大"(最后)条件进行硬编码.在部署之前，请删除控制台日志.

This is a bit verbose and follows your array starting with the largest value which I used instead of hard coding that for the "largest" (last) conditional. Remove the console logs prior to deployment.

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

这篇关于设置数组以处理大小条件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！