jquery - 如何选择不同方向时显示哪个div？

Question

我创建了这个简单的幻灯片，但我想知道如何按方向选择不同的 div。因此，例如现在正在阅读纵向和横向“容器画廊”，但如果我希望这个 div 仅以纵向显示，而“容器画廊景观”仅以横向图像显示，我该如何实现？

这是我的 fiddle ，可以查看我的代码及其工作方式 http://jsfiddle.net/25q253Lu/

jQuery

    var currentIndex = 0,
      items = $('.container-gallery div'),
      itemAmt = items.length;

    function movingItems() {
      var item = $('.container-gallery div').eq(currentIndex);
      items.hide();
      item.css('display','inline-block');
    }

    $('.next').click(function() {
      currentIndex += 1;
      if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
      }
      movingItems();
    });

    $('.prev').click(function() {
      currentIndex -= 1;
      if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
      }
      movingItems();
    });

我的解决方案

我创建了一个不同的 var itemsLandscape，然后关联了我的景观 div，因为如果您为相同的 var 关联不同的值，则只有最后一个将被视为有效。示例:var items = 4 和 var items = 5 然后 var items = 5 因为第一个值为 null。

var currentIndex = 0,
          items = $('.container-gallery div'),
          itemsLandscape = $('.container-gallery-landscape div'),
          itemAmt = items.length;

        function movingItems() {
          var item = $('.container-gallery div').eq(currentIndex);
          var itemLandscape = $('.container-gallery-landscape div').eq(currentIndex);
          items.hide();
          itemsLandscape.hide();
          item.css('display','inline-block');
          itemLandscape.css('display','inline-block');
        }

        $('.next').click(function() {
          currentIndex += 1;
          if (currentIndex > itemAmt - 1) {
            currentIndex = 0;
          }
          movingItems();
        });

        $('.prev').click(function() {
          currentIndex -= 1;
          if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
          }
          movingItems();
        });

Answer 1

我会使用 CSS orientation media query :

@media (orientation: portrait) {
    .container-gallery-landscape {
        display: none;
    }
}
@media (orientation: landscape) {
    .container-gallery {
        display: none;
    }
}

然后，如果您需要知道在任何给定时间显示的是哪个 div，可以使用 css 来查找:

if ($(".container-gallery").is(":visible")) {
    // It's visible, we must be in portrait
}

这是一个例子；在 iPad 或类似设备上调出它，旋转到每个方向，然后单击按钮:

$("#the-btn").on("click", function() {
  if ($(".container-gallery").is(":visible")) {
    alert(".container-gallery visible");
  } else {
    alert(".container-gallery not visible, so presumably .container-gallery-landscape is");
  }
});

@media (orientation: portrait) {
  .container-gallery-landscape {
    display: none;
  }
}
@media (orientation: landscape) {
  .container-gallery {
    display: none;
  }
}

<div class="container-gallery">container-gallery</div>
<div class="container-gallery-landscape">container-gallery-landscape</div>
<input type="button" id="the-btn" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>