我想要 1 个 480 像素的小屏幕图像，然后 2 个 580 像素的图像，然后 3 个 768 像素的图像，然后 4 个 980 像素的图像

Posted 2023-05-08

【中文标题】我想要 1 个 480 像素的小屏幕图像，然后 2 个 580 像素的图像，然后 3 个 768 像素的图像，然后 4 个 980 像素的图像

【英文标题】：i want 1 image in small screen in 480px then 2 image 580px then 3 image 768px then 4 image 980px

【发布时间】：2022-01-17 19:38:01

【问题描述】：

我想定义 4 个屏幕尺寸和 4 个变量值。我正在尝试如下。

if ($(window).width() > 789) 
  var cyx = 1;

if ($(window).width() < 780) 
  cyx = 2;

if ($(window).width() < 580) 
  cyx = 3;

if ($(window).width() < 480) 
  cyx = 4;

是否可以在 javascript 中以更短的方式执行此操作？

谢谢。

【问题讨论】：

我看不懂你的代码？这根本没有意义。

我在下面有这个代码....但是我想缩短这个 if ($(window).width() > 789) var cyx = 1; if ($(window).width()

为了将来参考，请始终将有效的逻辑放在问题中。在这种情况下，我已经为您编辑了它。另外，你为什么需要这样做？ UI 和 JS 应该是两个完全独立的实体。如果您必须根据屏幕大小修改 JS 代码，则表明某些事情没有正确完成。

你可以“codegolf”任何东西，当你说“更短”时，你只是在寻找建议的改进吗？你现在拥有的不是特别长（对于一段未缩小且易于理解的代码）

cyx 应该为$(window).width() === 780 包含什么值？

【参考方案1】：

var width = $(window).width();
var cyx;

if (width > 781) 
  cyx = 4;
 else if (width > 780) 
  cyx = 3;
 else if (width > 580) 
  cyx = 2;
 else if (width > 480) 
  cyx = 1;

这就是我会做这种逻辑的方式。您可以使用三元组“缩短”它，但它看起来很混乱。

【讨论】：

acctualy 我在下面有这段代码与 react js 一起使用，但上面的代码在下面不起作用是我的代码 if ($(window).width() > 789) var cyx2 = 1; if ($(window).width()

@UISMART 为什么要在 React.js 中使用 jQuery 作为窗口宽度？你可以避免使用 jQuery，只使用 React.js：betterprogramming.pub/…

【参考方案2】：

我过去做过的另一种方法是在页面上包含一个高度为 0 的 div。我给它一个像#breakpoint 这样的ID。然后我在 CSS 样式表中为它设置了一个 z-index。例如：

#breakpoint  height:0; z-index:10; 
@media only screen and (min-width: 768px) 
    #breakpoint  z-index:5; 

@media only screen and (min-width: 1200px) 
    #breakpoint  z-index:1; 

然后，您只需测量 z-index 值。

var bp = parseInt($("#breakpoint").css('z-index'));
switch(bp)
    case 10:
        console.log("Is mobile");
        break;
    case 5:
        console.log("Is tablet");
        break;
    case 1:
        console.log("Is desktop");
        break;

这减少了窗口宽度的测量，您可以在 CSS 代码中调整断点，而不是在 JavaScript 代码中定义宽度。

【参考方案3】：

你可以使用一些数学：

const cyx = [780, 580, 480].filter(el => el > $(window).width()).length + 1;

这不是问题中的代码所做的，但这是我假设你真正想要的。

例子：

console.log([780, 580, 480].filter(el => el > 800).length + 1);
console.log([780, 580, 480].filter(el => el > 700).length + 1);
console.log([780, 580, 480].filter(el => el > 500).length + 1);
console.log([780, 580, 480].filter(el => el > 400).length + 1);

【讨论】：

感谢您的帮助，是的，但它以相反的方式工作.....我无法控制它。它在大屏幕小屏幕 2、3、4 中显示 1 个图像，但我希望它在大屏幕上显示 4 个图像，然后是 3、2、1

@UISMART 您问题中的代码为$(window).width() === 400 分配4，为$(window).width() === 800 分配1，与我的答案中的代码完全相同。如果你问错了问题，你应该先修正问题，然后我才能修正我的答案。

我想要 1 张 480px 的小屏幕图片，然后 2 张 580px 的图片，然后 3 张 768px 的图片，然后 4 张 980px 的图片，然后 5 张 1280px 的图片 .......这样请帮忙，谢谢

@UISMART 你能先解决你的问题吗？列表 480px、580px、768px、980px、1280px 是从哪里来的？您的问题还有其他价值。

在您的代码中我不需要该列表。这是一个非常好的代码。但它根据我的需要以相反的方式工作。所以请帮助我用单行代码来扭转我之前描述的这些