如果X = width和X = height，JS图像检测不会为图像添加类 [英] JS image detect won't addClass for image if X = width and X =height

问题描述

我有以下脚本。 每个时间'mobile-carousel-container'加载 'item '它找到'item' ---的类名的 div if 'item' hasClass of' active'应用基于图像的特定类如果是特定的宽度和高度。
我运行的问题into，是我知道一些伸手可及的DOM不是检查每个'项'，所以它找到一个与'活动'的当前状态，并简单地应用它 - 我想要它做它每次一个图像幻灯片通过轮播

I have the following script below. What is currently does, for each time the 'mobile-carousel-container' loads an 'item' it finds the div with the classname of 'item' --- if 'item' hasClass of 'active' it then applies specific class based to the image if is a specific width and height. The problem I am running into, is the DOM I know for some reach is not checking each 'item' and so it finds the one with the current state of 'active' and simply applies it -- I want it to do it EVERYTIME an images slides through the carousel -- not just that one instance.

想法？

http://codepen.io/anon/pen/Xdjpyr

// everytime this carousel loads do this            
$('.mobile-carousel-container').each(function() {
  // find the carousel item -- declare variable
  var imgs = $('.item');
  // for each item function do this --
  imgs.each(function() {
    // if item hasClass 'active' -- do this
    if ($(imgs).hasClass('active')) {
      // img is this instance 
      var img = $(this);
      // check ALL ifs if any dimensions match image dimensions

      // if this addClass 'top'
      if (img.width() == 320 && img.height() == 50 || // 300 x 250
        img.width() == 300 && img.height() == 100 || // 300 x 100
        img.width() == 300 && img.height() == 50 || // 300 x 50
        img.width() == 250 && img.height() == 250 || // 250 x 250
        img.width() == 728 && img.height() == 90 || // 729 x 90
        img.width() == 468 && img.height() == 60 || // 468 x 60
        img.width() == 240 && img.height() == 400 || // 240 x 400
        img.width() == 180 && img.height() == 150 || // 180 x 150
        img.width() == 125 && img.height() == 125 || // 125 x 125
        img.width() == 234 && img.height() == 60 || // 234 x 60
        img.width() == 120 && img.height() == 60) // 120 x 60
      {
        img.addClass('top');
      }
      // if this addClass 'bottom'
      if (img.width() == 930 && img.height() == 180 || // 930 x 180
        img.width() == 336 && img.height() == 280 || // 336 x 280
        img.width() == 234 && img.height() == 60) // 234 x 60
      {
        img.addClass('bottom');
      }
      // if this addClass 'middle'
      if (img.width() == 300 && img.height() == 250) // 300 x 250
      {
        img.addClass('middle');
      }
      // if this addClass 'right'
      if (img.width() == 300 && img.height() == 250 || // 300 x 250
        img.width() == 120 && img.height() == 600 || // 120 x 600
        img.width() == 160 && img.height() == 600) // 600 x 160 
      {
        img.addClass('right');
      }
    }
  });
});

推荐答案

    $("#carousel-container-mobile, #carousel-container-desktop").on('slid.bs.carousel', function() {
      $('.item').each(function() {
          var img = $('img', this);
          if (img.width() == 320 && img.height() == 50 || // 300 x 250
            img.width() == 300 && img.height() == 100 || // 300 x 100
            img.width() == 300 && img.height() == 50 || // 300 x 50
            img.width() == 250 && img.height() == 250 || // 250 x 250
            img.width() == 728 && img.height() == 90 || // 729 x 90
            img.width() == 468 && img.height() == 60 || // 468 x 60
            img.width() == 240 && img.height() == 400 || // 240 x 400
            img.width() == 180 && img.height() == 150 || // 180 x 150
            img.width() == 125 && img.height() == 125 || // 125 x 125
            img.width() == 234 && img.height() == 60 || // 234 x 60
            img.width() == 120 && img.height() == 60) // 120 x 60
          {
            img.addClass('top');
          }
          if (img.width() == 930 && img.height() == 180 || // 930 x 180
            img.width() == 336 && img.height() == 280 || // 336 x 280
            img.width() == 234 && img.height() == 60) // 234 x 60
          {
            img.addClass('bottom');
          }
          if (img.width() == 300 && img.height() == 250) // 300 x 250
          {
            img.addClass('middle');
          }
          if (img.width() == 300 && img.height() == 250 || // 300 x 250
            img.width() == 120 && img.height() == 600 || // 120 x 600
            img.width() == 160 && img.height() == 600) // 600 x 160
          {
            img.addClass('right');
        }
      });

    });

这篇关于如果X = width和X = height，JS图像检测不会为图像添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！