将类硬编码到数组中

Question

我想展示一个图片库。显示的图片可以是纵向的，也可以是横向的，具体取决于屏幕方向。图片是横向和纵向图片相同的，除了它们的尺寸。

我已经搜索过了，到目前为止我已经找到了这颗宝石。

@media only screen and (orientation: portrait){
.land{display: none;}
.port{display: inline-block;}
}
@media only screen and (orientation: landscape){
.land{display: inline-block;}
.port{display: none;}
}

我想根据它们的尺寸将.land 或.port 类附加到我的图像数组中，以便根据屏幕方向显示合适的图片。

我该怎么做？

如果我可以提供任何其他信息，请告诉我。

谢谢

编辑：我要感谢大家到目前为止所展示的示例。我之前没有提到（我想我应该提到）的是我的画廊有一个下一个和一个上一个按钮。图像不断变化，据我了解，更改显示图片的类不会更改显示的图像，它只会更改在这种情况下无济于事的类。

或者我在这里遗漏了一些重要的东西？

拥有两个阵列并在方向更改时仅更改拍摄照片的阵列不是更有意义吗？

或者可能有一个对象，像这样

let pictures = [
{
port: './imgs/port-pic1.jpg',
land: './imgs/land-pic1.jpg'
},{
port: './imgs/port-pic2.jpg',
land: './imgs/land-pic2.jpg'
}
]

Answer 1

您可以检测屏幕的宽度和高度，并在此基础上遍历所有图像并为它们分配适当的类。

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "portrait"; // by default


if (width>height) {
    screenClass = "landscape";
}

let images = document.querySelectorAll("img");

for(let i=0; i<images.length; i++) {
  let imageClass = "port"; // by default
  let img = images[i];
  if (img.width>img.height) {
      imageClass = "land";
  }
  // combine the class for the screen orientation, plus the image 
  // orientation, for more customization

  img.className = screenClass + " " + imageClass;

}

编辑

根据问题的编辑，据我了解，用户有一个存储在对象数组中的现有图像数组。每个对象都有两个属性，port 和 land。也许这些是相同的图像但处于不同的模式，或者这些是两个不同的图像处于两种不同的模式。在任何情况下，都希望遍历数组，并且根据设备方向解析存储在属性中的图像。如果是这样的话，那么这里是如何实现的：

let pictures = [ {
                  port: './imgs/port-pic1.jpg',
                  land: './imgs/land-pic1.jpg'
                 },{
                   port: './imgs/port-pic2.jpg',
                   land: './imgs/land-pic2.jpg'
                }];

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "port"; // by default


if (width>height) {
    screenClass = "land";
}

pictures.forEach( pic => {
   let url = pic[screenClass];  // this will either be value of land 
                                //  or  value of port
    // do whatever with the url

    let img = document.createElement("img");
    img.src = url;
    img.className = "whatever";

    document.querySelector("body").appendChild(img);

});

Answer 2

你可以这样做

window.onorientationchange = function() { 
    if(window.innerHeight > window.innerWidth){
        //$("img.land").removeClass("land").addClass("port");
        var element = document.querySelectorAll("img.land");
        element.classList.remove("land");
        element.classList.add("port");
    }else{
        //$("img.port").removeClass("port").addClass("land");
        var element = document.querySelectorAll("img.port");
        element.classList.remove("port");
        element.classList.add("land");
    }
  console.log("the orientation of the device is now " + screen.orientation.angle);
};

jQuery Mobile 有一个事件来处理这个属性的变化......如果你想在有人稍后旋转时发出警告 - orientationchange

同时查看 window.orientation

Answer 3

您可以通过在元素的 classList 上使用切换来实现：

function doOnOrientationChange() {
  const isLandscape = window.orientation == -90 || window.orientation == 90;
  document.querySelectorAll('img.land').forEach(e => e.classList.toggle('land', isLandscape));
  document.querySelectorAll('img.port').forEach(e => e.classList.toggle('port', !isLandscape));
}

window.addEventListener('orientationchange', doOnOrientationChange);

来自How do I correctly detect orientation change using Phonegap on iOS?的方向 从How to toggle class using pure javascript in html切换