Question

之前我有以下 function并且它已经被多余的重复变量所破坏。所以我想改进它并将图像存储到数组中。但是，即使使用前一个脚本的相同上下文标记，它也不会检测数组中的图像值并将其与item匹配。我不知道为什么。我设置每个项目以检查不同图像大小的实例，然后执行if状态。

Working fiddle (non-working script):

Working fiddle: (working script):

我没有表达数组的正确值。我觉得我正在思索，忽略了一些小事。但老实说，我很难过。

var top_horizontalvert_mobile = ['320 x 50', '300 x 100', '300 x 50', '250 x 250', '120 x 60', '240 x 400', '180 x 150', '125 x 125'];
var top_horizontal_desktop = ['729 x 90', '468 x 60'];                                                                   
var bottom_horizontal_desktop = ['930 x 180', '336 x 280'];                             
var bottom_vert_mobile = ['234 x 60'];
var middle_vert_mobile = ['300 x 250'];
var right_vert_desktop = ['120 x 600', '160 x 600'];
$("#carousel-container-mobile, #carousel-container-desktop").on('slid.bs.carousel', function() {
  $('.item').each(function() {
      var imgs = $('.item');
      var w = $(img).width();
      var h = $(img).height();
      var img = $('img', this);
      if (w == top_horizontalvert_mobile && h == top_horizontalvert_mobile) {
         img.addClass('top, smaller-img');
      }
      if (w == top_horizontal_desktop && h == top_horizontal_desktop) {
         img.addClass('top, larger-img');
      }
      if (w == bottom_vert_mobile && h == bottom_vert_mobile) {2
         img.addClass('bottom, smaller-img');
      }
      if (w == bottom_horizontal_desktop && h == bottom_horizontal_desktop) {
         img.addClass('bottom, larger-img');
      }
      if (w == middle_vert_mobile && h == middle_vert_mobile) {
         img.addClass('middle, smaller-img');
      }
      if (w == right_vert_desktop && h == right_vert_desktop) {
         img.addClass('right, smaller-img');
      }
      if (w == middle_vert_mobile && h == middle_vert_mobile) {
         img.addClass('right, smaller-img');
      }
   });
});

Answer 1

两个脚本之间的主要区别在于您如何比较值。

在工作脚本中，您直接比较数字：

if (img.width() == 320 && img.height() == 50)

在非工作脚本中，您实际上是在将数字与数组进行比较。

if (w == top_horizontalvert_mobile)

如果我们交换到更多的字面值：

if (img.width() == ['320 x 50', '300 x 100', '300 x 50', '250 x 250', '120 x 60', '240 x 400', '180 x 150', '125 x 125']

由于数组是不同的数据类型，因此数组将不会存在数组。

根据我所看到的情况，您尝试将每个宽度和高度与数组中的每个值进行比较，但这需要以下最小步骤：

将数组转换为多维数字数组，因为将其保存为字符串需要您解析数据（这比必要的工作更多。所以不是[320 x 50', '300 x 100' ...]，而是' d [[320,50]，[300,100] ......]`
使用for循环遍历数组的每个值，以便进行比较。请参阅Codecademy's tutorial on for loops了解详情。

如果您有任何其他问题，请与我们联系！

顺便说一下，在查看了您的工作脚本并查找您要执行的操作之后，您似乎正在尝试通过jQuery根据图像大小应用不同的样式。您有没有理由不直接将这些类应用于图像本身，因为您似乎对图像大小有非常具体的要求？

为什么不能通过变化的数组匹配宽度和高度？

1 个答案: