如何根据屏幕大小响应地更改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有一个div，6有一个，然后使用CSS Media查询根据最小/最大宽度显示/隐藏适当的div，如下所示……

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“值才是有效的。

换句话说，如果和我上面的一样，那么大屏幕和小屏幕都将显示12个图像。如果我把它换一下&颠倒顺序，那么两种屏幕尺寸都会显示6个图像。

我已经搜索了很多次，没有发现这一定是html5数据属性的行为，但我不确定。

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

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

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

注意:无论您能为我提供什么解决方案，我都希望当浏览器窗口跨断点调整大小时，页面不必刷新/重新加载。理想情况下，数据量会发生变化&页面上的图像数量会发生变化。

谢谢你的帮助。

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>

​