Question

我在下面有以下脚本。目前的情况是，在each时'mobile-carousel-container'加载'item'，它会找到div，其类名为'item' --- {{1} }'if'hasClass然后根据active'将特定类应用于特定image 我遇到的问题是，我知道某些范围的DOM不是检查每个“项目”，因此它找到当前状态为“活动”的那个并且只是应用它 - 我希望它每隔一段时间做一次图像滑过旋转木马 - 而不仅仅是那个例子。

思想？

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

width and height.

Answer 1

由于第8行，它只能点击'活动'照片：

if ($(imgs).hasClass('active'))

它只会在第一次加载时执行。如果您想要重复点击触发器并在事件上再次执行此操作，则需要点击触发器。

http://api.jquery.com/on/

Answer 2

var imgs = $('.item');
  imgs.each(function() {
    if ($(imgs).hasClass('active')) {
      var img = $(this);

此变量img为div.item，其宽度默认为屏幕宽度。如果你想获得图像的宽度，你将不得不这样做：

      var img = $('img', this);

在尝试获取图片的loaded和width之前，请确保图片为height。您可以将整个代码包装在$(window).load()中，以确保在所有图像完全加载后运行代码。

var dimensionsArray = ["300 x 250", "300 x 100", "300 x 50", 
                      "250 x 250", "729 x 90", "468 x 60","240 x 400", 
                      "180 x 150", "125 x 125", "234 x 60", "120 x 60"];
if (dimensionsArray.indexOf(img.width() +" x "+ img.height()) !== -1)
{
  img.addClass('top');
}

Answer 3

您的评论没有描述您的代码实际执行的操作。例如，您的第一个代码行

// everytime this carousel loads do this            
$('.mobile-carousel-container').each(function() {

每次旋转木马加载时都不会发生。当页面加载时，它会发生一次，而它所做的只是遍历图像。因为第8行：

if ($(imgs).hasClass('active')) {

...当页面加载时，唯一受影响的图像将是一个图像，即活动状态（正如Spencer Rohan已经指出的那样）。您需要了解.each（）的工作原理：http://api.jquery.com/each/

编辑：此外，单词“加载”＃39;可能会在你的评论中被误解。转盘是否真正“载入”？显示图像时的图像？会有点奇怪。如果所有图像确实已经加载了＃39;在页面加载和轮播只是给它们显示：块和显示：无（或类似的东西）显示它们，你可以跳过第8行并在页面加载时将类应用于所有图像。

Answer 4

    $("#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图像检测不会为图像添加类

4 个答案: