如何根据屏幕大小响应地更改 HTML5 数据属性值

Question

我正在使用 an Instagram widget 在网站上显示图片。

它使用 jquery 并且工作正常，但我认为我遇到了限制。

我得到它显示 2 列并总共显示 12 张图像。它通过在 "div" 标签内使用 "data-attributes" 来实现。这是一个例子...

<div class="instawidget" data-amount="12" data-grid="2"></div>

这适用于平板电脑和桌面屏幕，但不适用于移动设备（考虑到我的特定布局）。

因此，对于较小的屏幕，我正在尝试将 "data-amount" 值从 12 更改为 6。

我了解到，不幸的是，CSS 无法改变这种 HTML。所以我想我可以复制 div，一个用于 12，一个用于 6，然后使用 CSS 媒体查询 show/hide 适当的 div 基于 min/max-width,像这样...

CSS...
@media screen and (min-width: 736px) {
    div.instawidget[data-amount="12"] {
        display: block;
    }
    div.instawidget[data-amount="6"] {
        display: none;
    }
}
@media screen and (max-width: 736px) {
    div.instawidget[data-amount="6"] {
        display: block;
    }
    div.instawidget[data-amount="12"] {
        display: none;
    }
}

HTML...
<div class="instawidget" data-amount="12" data-grid="2"></div>
<div class="instawidget" data-amount="6" data-grid="2"></div>

现在，每个 div 的实际显示都有效 - 但没关系，因为不起作用的是，div 的 "data-amount" 值打开top 是粘住的那个。

换句话说，如果像我上面那样，那么大屏幕和小屏幕都会显示12张图片。如果我切换它并颠倒顺序，那么两种屏幕尺寸都会显示 6 张图片。

我已经搜索了很多，但找不到这必然是 html5 数据属性的行为，但我不确定。

如果不是，那我的 css 做错了什么？

如果是，那么有没有合理的跨浏览器解决方案？

我在其他堆栈中找到了一些 Jquery 和 Javascript 产品，但我对如何编程使它们在这种情况下工作还不够了解。我通常可以捏造它足以让他们工作，但所有的例子都太多样化或太笼统，我看不到足够的模式来复制。

注意：无论您能帮我解决什么问题，我都希望页面不必 refresh/reload 当浏览器 window 跨断点调整大小时。理想情况下，数据量会发生变化，页面上的图像数量也会发生变化。

感谢您的帮助。

Answer 1

我不是 100% 确定我理解你的问题，但我相信你只是想在移动设备上只显示 6 张图片而不是 12 张。如果是这种情况，你可以使用 CSS 无需复制小部件：

@media only screen and (max-width: 768px) {
  .instawidget li:nth-child(n+7) {
    display:none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instawidget" data-user-name="kevin" data-amount="12" data-grid="2"></div><script type="text/javascript" src="//www.stadget.com/cdn/widget-init.min.js"></script>

如何根据屏幕大小响应地更改 HTML5 数据属性值

How to change HTML5 data-attribute value responsively based on screen size

jquery

media-queries

custom-data-attribute